Knockout JS with Mappings 递归模板

Question

我在映射插件中使用 knockout JS：

https://github.com/SteveSanderson/knockout.mapping/tree/master/build/output

我好像无法访问数据。

这是一个纯敲除和纯 JSON:

的工作示例

http://jsfiddle.net/u0hv6wxe/2/

这里是一个损坏的示例，其中的剔除和映射没有渲染任何内容：

http://jsfiddle.net/95zztzkq/1/

我使用映射的原因是为了防止创建具有来自 ajax.

的数千个属性的模型

关于插件的文档：

http://knockoutjs.com/documentation/plugins-mapping.html

JS：

var initialData = {
    '@type': 'type1',
    'contents': [
        {
            '@type' : 'type2',
            'stringx': 'test'
        },
        {
            '@type' : 'type2',
            'stringx': 'test2'
        }
    ]
};
defaultData = ko.mapping.fromJS(initialData);
ko.applyBindings(defaultData);
console.log(defaultData['@type']());
console.log(defaultData.contents()[0]['@type']());
console.log(defaultData.contents()[1]['@type']());

模板：

<!-- ko template: { name: 'mainTemplate', data: $data } --><!-- /ko -->

<script id="mainTemplate" type="text/html">
    <!-- ko if: ($data['@type']=='type1') -->
            <div class="Page">
                PageTest
            <!-- ko if: ($data.contents) -->
                    <!-- ko template: { name: 'mainTemplate', foreach: $data.contents } -->
                    <!-- /ko -->
            <!-- /ko -->
            </div>
    <!-- /ko -->    
    <!-- ko if: ($data['@type']=='type2') -->
            <div class="test">
                StringTest <span data-bind="text: stringx"></span>
            </div>
    <!-- /ko -->    
</script>

我已经在这个问题上卡了 2 天了，非常感谢大家的帮助！

谢谢:)

Answer 1

在查看条件时，我们需要使用 () 读取可观察值，这将解决问题

查看：

<!-- ko template: { name: 'mainTemplate', data: $data } --><!-- /ko -->

<script id="mainTemplate" type="text/html">
    <!-- ko if: ($data['@type']()=='type1') -->
            <div class="Page">
                PageTest
            <!-- ko if: ($data.contents) -->
                    <!-- ko template: { name: 'mainTemplate', foreach: $data.contents } -->
                    <!-- /ko -->
            <!-- /ko -->
            </div>
    <!-- /ko -->    
    <!-- ko if: ($data['@type']()=='type2') -->
            <div class="test">
                StringTest <span data-bind="text: stringx"></span>
            </div>
    <!-- /ko -->    
</script>

工作fiddlehere

Knockout JS with Mappings 递归模板

Knockout JS with Mappings recursive templating

javascript

ajax

knockout-mapping-plugin

knockout.js