Question

我正在尝试使用KO模板将JSON文件（see here）解析为一些漂亮的网格布局..（想想类似于砌体/同位素布局）..每个模板部分将具有不同大小的矩形和其中的正方形，但整体模板符合5盒宽3盒高的网格（for example）

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

我的问题是我似乎无法检查我当前在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无效。

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

Answer 1

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

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

如果你需要使用数组中项目的索引，可以从Knockout 2.1版开始通过$index context property使用。从版本2.2（尚未发布[2012年10月1日]，但release candidate version available）开始，名称函数也可以访问上下文对象。然后你可以做这样的事情：

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

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

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

1 个答案: