javascript - 使用 json 初始化 KnockOut 模型

Question

我想用从服务器接收到的 json 来初始化一个 Knockout 模型。

目前，我有这个 html ：

<div class='liveExample'>   
    <p>First name: <input data-bind='value: firstName' /></p> 
    <p>Last name: <input data-bind='value: lastName' /></p> 
    <h2>Hello, <span data-bind='text: fullName'> </span>!</h2>  
</div>

而这个 JavaScript ：

// Here's my data model
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);

    this.fullName = ko.computed(function() {
        return this.firstName() + "/" + this.lastName();
    }, this);
};

var viewModel = new ViewModel();
data = { firstName: 'test', lastName: 'bla' }; //received from the server side

viewModel.firstName(data.firstName)
viewModel.lastName(data.lastName)

ko.applyBindings(viewModel);

它有效，但如果我有更多的领域，它可能会很痛苦。

我尝试像这样使用映射插件：

var viewModel = new ViewModel();
data = { firstName: 'test', lastName: 'bla' }; //received from the server side

viewModel = ko.mapping.fromJSON(data, viewModel)

ko.applyBindings(viewModel);

在这种情况下，方法fullName是未定义的。

我试图这样做：

viewModel = ko.mapping.fromJSON(viewModel, data)

并且lastNameandfirstName是未定义的。

有没有一个简单的解决方案来做到这一点？

谢谢！

Answer 1

您需要使用ko.mapping.fromJS()，因为您使用的是真正的 JavaScript 对象。

该ko.mapping.fromJSON()方法适用于您使用 JSON 字符串时。例如：

'{ "firstName": "test", "lastName": "bla" }'

Answer 2

如果 data 的属性名称和它对应的 viewModel observable 名称相同，则可以使用以下代码。

var viewModel = new ViewModel();
for(var prop in data)
viewModel[prop](data[prop]);

ko.applyBindings(viewModel);

Answer 3

唯一淘汰赛：

var ViewModel = function(data) {
    var self = this;
    self.firstName = ko.observable(data.first);
    self.lastName = ko.observable(data.last);

    self.fullName = ko.computed(function() {
        return self.firstName() + "/" + self.lastName();
    });
};

var data = {first: 'lorem', last: 'ipsum'};
ko.applyBindings(new viewModel(data));

淘汰赛 + ko.mapping

var ViewModel = function(data) {
    var self = this;
    ko.mapping.fromJS(initData, {}, self);

    self.fullName = ko.computed(function() {
            return self.firstName() + "/" + self.lastName();
    });
};

var data = {first: 'lorem', last: 'ipsum'};
ko.applyBindings(new viewModel(data));