сопоставление нокаутов, начальные значения и вычисленные значения

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);