0

我正在尝试使用 KO 模板将 JSON 文件（参见此处）解析为一些漂亮的网格布局..（类似于砖石/同位素布局）..每个模板部分内部都有不同大小的矩形和正方形，但整体模板符合 5 框宽 3 框高的网格（例如）

鉴于此，我一直在尝试做的是检测模板，然后遍历每个项目，如果它在迭代中的某个索引加载单、双或三子模板。

我的问题是我似乎无法让它检查当前在 ViewTestProposal 数组中的哪个键..

下面是我的 WIP 代码..

<div data-bind="template: {if: Template == 'basic2', visible: Template == 'basic2', foreach: ViewTestProposal}">
    <div data-bind="template: {if: ViewTestProposal[0], name: 'single'}"></div>
</div>
<script type="text/html" id="single">
    <div class="box single">
        <p data-bind="text: Artist, attr:{title: Artist}"></p>
    </div>
</script>

我尝试将if: ViewTestProposal[0]部分更改为with: ViewTestProposal[0]，if: ViewTestProposal() === 0但if: ViewTestProposal == 0无济于事。

提前感谢您提供的任何帮助

4

1 回答 1

4

模板名称参数可以是一个函数，它根据数组中的当前项返回名称（见注 4）。有了这个，您可以访问具有模板名称的每个项目的属性：

<div data-bind="template: {
        foreach: ViewTestProposal, 
        name: function(item) {return item.boxsize;}
    }"></div>

如果您需要使用数组中项目的索引，可以从 Knockout 版本 2.1 开始通过$index context 属性使用。从版本 2.2（尚未发布 [1/Oct/2012]，但发布候选版本可用）开始，name 函数也可以访问上下文对象。然后你可以做这样的事情：

<div data-bind="template: {
        foreach: ViewTestProposal, 
        name: function(item, context) {
            switch(context.$index()) {
            case 0:
                return 'single';
            case 1:
                return 'double';
            // etc.
            }
        }
    }"></div>

显然，函数本身可以在您的视图模型中定义。

于 2012-10-02T09:48:25.863 回答