녹아웃 매핑, 초기 값 및 계산 된 값

Question

모델 시스템을 구축하면서 맵핑 플러그인을 사용하여 내 인생을 더 편리하게 만들 수 있었지만 몇 가지 문제에 직면했습니다.

내가 초기화하는 순간에 데이터가 없지만 여전히 화면에 빈 속성을 제공하려고합니다. 초기화 할 때 모델을 정의하고 나중에 값을 사용하여 모델을 업데이트함으로써 가능하게 만들었습니다.

App.Models.User = { 
    name: null, 
    username: null, 
    gender: null, 
    email: null, 
    img: null 
}; 
var me = ko.mapping.fromJS(App.Models.User); 

이 작업을 수행하는 가장 좋은 방법은 확실하지 않지만 상당히 잘 작동합니다.

이제는 img 속성을 업데이트하고 싶습니다. 아직 새 속성을 만들거나 자체 속성을 업데이트하려는 경우 두 시나리오에서 어떻게 수행 할 수 있는지 알고 싶습니다. 서버에서

내 데이터는이

{"me": 
    { 
     "username"  :"john", 
     "email"   :"johndoe@gmail.com", 
     "name"   :"John Doe", 
     "gender"  :"male", 
     "img"   :"profile_img_john.jpg" 
    } 
} 

내가 업데이트 IMG를 원하거나 그것에서 새 속성을 생성하고 images/profile_img_john.jpg

희망 의미가 모든 것을 만들 다소처럼 보인다.

Answer 1

녹아웃보기 모델 생성 및 초기화 부분을 분할했습니다. 실제 데이터가없는 뷰 모델을 만들고 HTML에 바인딩 한 다음 실제 데이터로 업데이트 할 수 있습니다. http://jsfiddle.net/apuchkov/zscP2/

var data = { "me": 
    { 
     "username"  :"john", 
     "email"   :"johndoe@gmail.com", 
     "name"   :"John Doe", 
     "gender"  :"male", 
     "img"   :"profile_img_john.jpg" 
    } 
} 

var User = function(data) { 
    this.name = ko.observable(); 
    this.username = ko.observable(); 
    this.gender = ko.observable(); 
    this.email = ko.observable(); 
    this.img = ko.observable(); 

    this.update(data); 
}; 

ko.utils.extend(User.prototype, { 
    update: function(data) { 
     this.name(data.name || ""); 
     this.username(data.username || ""); 
     this.gender(data.gender || ""); 
     this.email(data.email || ""); 
     this.img(data.img || "default-image-url.png"); 
    } 
}); 

//firstly create viewmodel without any data 
var user = new User({}); 
ko.applyBindings(user); 

//then set data later 
user.update(data.me);