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

淘汰映射，初始值和计算值

1 个答案: