Knockoutjs 映射和非结构化数据答案

【问题标题】：Knockoutjs mapping and unstructured dataKnockoutjs 映射和非结构化数据
【发布时间】：2015-01-28 13:15:37
【问题描述】：

如何通过 knockoutjs 映射插件使用非结构化数据？例如源json：

[
    {
        "id": 1,
        "name": "Store #1",
        "address": "City #1"
    },
    {
        "id": 2,
        "name": "Store #2"
    }
]

没有地址的存储#2。我的模板：

<ul data-bind='foreach: data'>
    <li data-bind='with: id'>
        <a href data-bind='text: name, click: function () { $parent.view($data, $index()) }'>           
        </a>
        <span data-bind='text: address'></span> 
   </li>
</ul>

我的视图模型

Module.store = function () {

    var self = this;

    self.data = ko.mapping.fromJS([]);
    self.init = function () {
        $.getJSON('json/stores.json', function (stores) {
            ko.mapping.fromJS(stores, self.data);
        });
    };
};

如果我运行这段代码，我会得到错误：

Uncaught ReferenceError: Unable to process binding "text: function (){return address }" 消息：地址未定义

对于商店 #2

如何为 Store #2 地址属性设置 null 或空字符串？

【问题讨论】：

标签： javascript knockout.js knockout-mapping-plugin

【解决方案1】：

如果您的视图显示地址，那么您的视图模型必须包含该属性。

为各个商店制作视图模型：

Module.Store = function (data) {
    this.id = null;
    this.name = null;
    this.address = null;

    ko.mapping.fromJS(data, {}, this);
}

以及商店列表中的使用映射定义（参见documentation）：

Module.StoreList = function () {
    var self = this,
        mappingDefinition = {
            create: function (options) {
                return new Module.Store(options.data);
            }
        };

    self.stores = ko.observableArray();

    self.viewStore = function (store) {
        // ...
    };
    self.init = function () {
        $.getJSON('json/stores.json', function (stores) {
            ko.mapping.fromJS(stores, mappingDefinition, self.stores);
        });
    };
};

修改后的视图（作为一般规则，尽量避免视图定义中的内联函数）：

<ul data-bind='foreach: stores'>
    <li>
        <a href data-bind='text: name, click: $parent.viewStore'></a>
        <span data-bind='text: address'></span> 
    </li>
</ul>

【讨论】：

create: function (options) { options 和 options.data 究竟指的是什么。我想了解映射是否有更详细解释的链接。淘汰文档没有足够的帮助
你必须仔细阅读。这直接来自the docs：“提供给创建回调的options 参数是一个JavaScript 对象，其中包含：data：包含此子对象数据的JavaScript 对象和parent：父对象或这个孩子所属的数组”

【解决方案2】：

在我看来，knockout-mapping-plugin 并没有开箱即用的功能。可能您应该考虑针对该问题尝试另一种解决方法，我至少可以看到两个：

1) 从服务器返回带有null 的json

2) 有条件地显示该跨度，例如：

<ul data-bind='foreach: data'>
    <li data-bind='with: id'>
        <a href data-bind='text: name, click: function () { $parent.view($data, $index()) }'>           
        </a>
        <!-- ko if: address -->
        <span data-bind='text: address'></span> 
        <!-- /ko -->
   </li>
</ul>

【讨论】：