javascript - Knockout JS 与映射递归模板

Question

我正在使用带有映射插件的knockout JS:

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

我似乎无法访问数据。

这是一个使用纯 knockout 和纯 JSON 的工作示例:

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

这是一个损坏的示例，其中 knockout 和映射不渲染任何内容:

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>

我在这个问题上被困了两天，非常感谢所有帮助!

谢谢:)

Answer 1

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

查看:

<!-- 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>

工作 fiddle here