在foreach循环中绑定不同的Knockout JS模板 [英] bind different Knockout JS templates inside foreach loop

问题描述

我正在尝试使用KO模板将JSON文件(请参阅此处)解析为一些漂亮的网格布局..(认为类似于砌体/同位素布局)..每个模板部分内部将具有不同大小的矩形和正方形，但整个模板符合5盒宽3盒高的网格(

I am trying to use KO templates to parse a JSON file (see here) into some pretty looking grid layouts.. (think similar to masonry/isotope layouts).. each template section will have different sized rectangles and squares inside it but the overall template conforms to a grid of 5 boxes wide by 3 boxes high (for example)

鉴于此，我一直想做的就是检测模板，然后遍历每个项目，如果它在迭代过程中的某个索引加载了单个，双重或三重子模板.

Given this what i have been trying to do is detect the template, then iterate through each item, if its a certain index in the iteration load either the single, double, or triple subtemplate..

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

my problem is that i cant seem to get it to check which key in the ViewTestProposal array im currently on..

下面是我的WIP代码.

below is my WIP code..

<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，但无济于事.

I have tried changing the if: ViewTestProposal[0] section to with: ViewTestProposal[0],if: ViewTestProposal() === 0 and if: ViewTestProposal == 0 to no avail.

在此先感谢您提供的帮助

Thanks in advance for any help you can provide

推荐答案

模板名称参数可以是根据数组中的当前项目返回名称的函数(

The template name parameter can be a function that returns the name based on the current item in the array (See note 4). With this you could access a property on each item that has the template name:

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

如果您需要使用数组中项目的索引，则可以从 Knockout版本2.1开始通过$index 可用的候选版本 )，名称函数也可以访问上下文对象.然后您可以执行以下操作:

If you need to use the index of the item in the array, this is available starting with Knockout version 2.1 through the $index context property. Starting with version 2.2 (not yet released [1/Oct/2012], but release candidate version available), the name function can also access the context object. Then you could do something like this:

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

很明显，该函数本身可以在您的视图模型中定义.

Obviously, the function itself could be defined in your view model.

这篇关于在foreach循环中绑定不同的Knockout JS模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！