在foreach循环中绑定不同的Knockout JS模板

Question

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

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

我的问题是我似乎无法让它检查 ViewTestProposal 数组 im 当前打开的哪个键。

下面是我的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无济于事。

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

Answer 1

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

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

如果需要使用数组中项的索引，可以从 Knockout 版本 2.1 开始到 $index 上下文属性。从版本 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>

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