KnockoutJS 映射插件的工作原理答案

【问题标题】：How KnockoutJS Mapping plugin worksKnockoutJS 映射插件的工作原理
【发布时间】：2013-12-03 01:47:29
【问题描述】：

这里我得到了一个示例代码，它说 KnockoutJS 映射插件自动绑定 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 映射插件如何理解 fname 值需要映射到数据绑定 firstName 和 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));

【问题讨论】：

如果你想在你的视图中使用不同的属性名称，比如lastname你在服务器上的fname，那么映射插件真的不能帮助你。您需要像第二个示例一样手动进行映射。
谢谢...所以当映射插件将使用时，服务器端视图模式和客户端视图模型必须相同......我对吗？
mapping 插件创建viewModel，其属性与它获得的模型名称相同；如果你只有一些属性，你想有不同的名字，你可以在映射后扩展 viewModel
感谢@Matus，但我不清楚你所说的“你可以在映射后扩展viewModel”你能解释一下你的陈述吗？谢谢

标签： asp.net-mvc knockout.js knockout-mapping-plugin

【解决方案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 也将被更新。

【讨论】：

感谢回复，但是什么时候会调用读写函数呢？这条线又会做什么 viewModel = ko.mapping.fromJS(new extendViewModel(), viewModel); ??请详细讨论。谢谢
读写函数可以被认为是属性的getter和setter；这条线基本上是将属性/方法从extendViewModel添加到viewModel