0

我一直在构建模型系统，当时我发现使用映射插件可能会让我的生活更轻松，尽管我面临的问题很少。

问题是我在初始化时没有数据，但我仍然想向屏幕提供空属性。我通过在初始化时定义模型以及稍后用值更新模型来实现这一点。

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

希望这一切都有意义。

4

1 回答 1

0

我会拆分淘汰视图模型创建和初始化部分。它将让您首先创建没有任何真实数据的视图模型，将其绑定到 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);
于 2013-02-20T15:59:36.520 回答