javascript - 基本 Knockout JS 映射到单个 JSON 对象

Question

我对 knockout 很陌生，正在创建一个 jquery 移动应用程序，希望获得 knockout 的好处。我花了最后一天的时间来解决一个非常简单的问题。我已经删除了代码并手动进行了手动绑定(bind)(因此几乎破坏了使用 KO 而不是 jquery 的目的)。无论如何，如果有人可以告诉我如何改变我必须使用 KO 的真正力量的东西，那么这对我来说是一个很好的基础。我能找到的任何代码示例总是针对比这复杂得多的问题(处理数组等)

我的 JSON:

{"id":9,"fullName":"John Doe","firstName":"John","lastName":"Doe","referenceNumber":"BUY-08","position":"Buyer","type":"Buyer","telephone":"028 82 240780","email":"m@email.com","departmentId":3,"departmentName":"DEPT B","country":"United Kingdom"}

我的 HTML:

 <div>
    Full Name: <input data-bind="value: fullName" disabled="disabled"/> <br />
    Ref: <input data-bind="value: reference" disabled="disabled"/> <br />
    Position: <input data-bind="value: position" disabled="disabled"/> <br />
    Email: <input data-bind="value: email" disabled="disabled"/> <br />
    Dept: <input data-bind="value: departmentName" disabled="disabled"/> <br />
    Country: <input data-bind="value: country" disabled="disabled"/> <br />
</div>  

我的Javascript:

$(document).ready(function () { 

    function DetailsViewModel() {
        var self = this; 
        self.fullName = ko.observable("");
        self.reference = ko.observable("");
        self.email = ko.observable("");
        self.position = ko.observable("");
        self.departmentName = ko.observable("");
        self.country = ko.observable("");

        var success = function (data) {
            self.fullName(data.fullName);
            self.reference(data.referenceNumber);
            self.email(data.email);
            self.position(data.position);
            self.departmentName(data.departmentName);
            self.country(data.country);
            $.mobile.loading('hide');
        };

        webAPICall("api/user/getcurrentuser",
            "GET", success); // simple wrapper I'm using for ajax calls

    } 
    ko.applyBindings(new DetailsViewModel()); 
});

非常感谢任何帮助，谢谢!

Answer 1

如果您不需要任何额外的功能或为您的 View 模型计算，那么映射插件的使用非常简单。您应该将 JSON 传递给 ko.mapping.fromJS:

var viewModel = {};

function success(data) {
    viewModel = ko.mapping.fromJS(data);
    ko.applyBindings(viewModel);
}
webAPICall("api/user/getcurrentuser", "GET", success); 

如果数据是 JS 对象使用 fromJS 函数，如果是 JSON 字符串则使用 fromJSON 。并确保您在 data-bind 属性和 json 中具有相同的属性名称。

这是工作示例:http://jsfiddle.net/axrwkr/5t5fj/50/