带有 Mappings 递归模板的 Knockout JS

Question

我正在使用带有映射插件的淘汰赛 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>

工作小提琴here