Question

这里我得到了一个示例代码，表示KnockoutJS Mapping插件会自动绑定UI。这是代码

<script src="~/Scripts/knockout.mapping-latest.js"></script>
 <script type="text/javascript">
        $(function() {
            var viewModel = ko.mapping.fromJS(@Html.Raw(Model.ToJson()));
            ko.applyBindings(viewModel);
          });
</script>

假设我的html绑定如下

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

我的服务器端模型返回json，如

{fname:Josh;lname:Steve};

所以这里我的问题是KnockoutJS Mapping插件如何理解fname值需要映射到数据绑定firstName＆amp; lname需要映射到数据绑定lastName吗？

我清楚我想说的是什么。所以在这种情况下指导我如何通过KnockoutJS Mapping插件将json绑定到html UI。

在这种情况下KnockoutJS Mapping插件是否正确选择？

我是否需要viewmode手动绑定

名字：

姓氏：

json as follows var person = {fname:Josh;lname:Steve};

var viewModel = function(person) {
    this.firstname= ko.observable(person.fname);
    this.lastname= ko.observable(person.lname);
};

ko.applyBindings(new viewModel(person));

Answer 1

根据评论中的要求，我将此作为可能的答案。

如果您的模型包含许多属性，并且只希望其中一些属性映射到不同的名称，则可以采用以下方法：

var viewModel = ko.mapping.fromJS(@Html.Raw(Model.ToJson()));
var extendViewModel = function () {
    this.firstName = ko.computed({
        read: function(){
            return viewModel.fname();
        },
        write: function(value){
            viewModel.fname(value);
        },
        owner: viewModel
    });
};

viewModel = ko.mapping.fromJS(new extendViewModel(), viewModel);
ko.applyBindings(viewModel);

然后你可以在你的标记中使用firstName进行绑定，viewModel.fname也会被更新。

KnockoutJS Mapping插件的工作原理

1 个答案: