Knockout.js - foreach 绑定 - 测试是否为最后一个元素 [英] Knockout.js - foreach binding - test if last element

问题描述

我正在使用以下模板:

<h3>允许的响应</h3><p data-bind="if: $data.datatypeTemplate().datatypeOptions().length == 0">这个问题还没有答案.<a href="#" data-bind="click: function(d, e){$root.addDatatypeOption($data.datatypeTemplate());}">添加一个</a><ul data-bind="foreach: $data.datatypeTemplate().datatypeOptions()"><li><a href="#" data-bind="文本:名称，点击:$root.selectedDatatypeOption，可见:$data !== $root.selectedDatatypeOption()"></a><input data-bind="value: name, visibleAndSelect: $data === $root.selectedDatatypeOption(), event: { blur: $root.clearDatatypeOption }, executeOnEnter: { callback: function(){ $root.addDatatypeOption($parent.datatypeTemplate()); } }"/>//我只想在 $data 是数组中的最后一个元素时才显示这个标签.问题在这里===><a href="#" data-bind="if: $data == $parent.datatypeTemplate().datatypeOptions()[ $parent.datatypeTemplate().datatypeOptions().length - 1 ]，点击:function(d, e){$root.addDatatypeOption($data.datatypeTemplate());}"><img src='/static/img/icons/custom-task-wizard/black/plus_12x12.png' title='添加选项'></a>

我在控制台中收到此错误:

未捕获的错误:无法解析绑定.消息:TypeError:Object [object Object] 没有方法datatypeTemplate"；绑定值:如果:$data == $parent.datatypeTemplate().datatypeOptions()[ $parent.datatypeTemplate().datatypeOptions().length - 1 ]，点击:function(d, e){$root.addDatatypeOption($data.datatypeTemplate());}

如果传递的元素在数组中的最后一个，我是否可以向我的视图模型添加一个函数，该函数返回真/假?

解决方案

我已经简化了问题，但是这个 jsFiddle 演示了一个可能的解决方案.

if"绑定:

我是最后一个元素

无容器if"绑定:

<!-- ko if: ($index() === ($parent.data().length - 1)) --><div>我又是最后一个元素了</div><!--/ko -->

您可以在 foreach 绑定中使用 $index 来获取当前绑定项目的索引.使用它与父级的原始集合进行比较.

有关绑定上下文的更多信息，请参阅此处.

I am using the following template:

<div class="datatypeOptions" data-bind="if: $data.datatypeTemplate().allowOptions">
    <h3>Allowed responses</h3>

    <p data-bind="if: $data.datatypeTemplate().datatypeOptions().length == 0">There are no responses for this question, yet. <a href="#" data-bind="click: function(d, e){$root.addDatatypeOption($data.datatypeTemplate());}">Add one</a>
    <ul data-bind="foreach: $data.datatypeTemplate().datatypeOptions()">
        <li>
            <a href="#" data-bind="text: name, click: $root.selectedDatatypeOption, visible: $data !== $root.selectedDatatypeOption()"></a>
            <input data-bind="value: name, visibleAndSelect: $data === $root.selectedDatatypeOption(), event: { blur: $root.clearDatatypeOption }, executeOnEnter: { callback: function(){ $root.addDatatypeOption($parent.datatypeTemplate()); } }" />
            //I want to show this a tag only if $data is the last element in the array.
Problem here ===>  <a href="#" data-bind="if: $data == $parent.datatypeTemplate().datatypeOptions()[ $parent.datatypeTemplate().datatypeOptions().length - 1 ], click: function(d, e){$root.addDatatypeOption($data.datatypeTemplate());}"><img src='/static/img/icons/custom-task-wizard/black/plus_12x12.png' title='Add option'></a>
        </li>
    </ul>
</div>

I get this error in the console:

Uncaught Error: Unable to parse bindings.
Message: TypeError: Object [object Object] has no method 'datatypeTemplate';
Bindings value: if: $data == $parent.datatypeTemplate().datatypeOptions()[ $parent.datatypeTemplate().datatypeOptions().length - 1 ], click: function(d, e){$root.addDatatypeOption($data.datatypeTemplate());}

Is my only option to add a function to my viewmodel that returns true/false if the passed element is last in the array?

解决方案

I've simplified the problem, but this jsFiddle demonstrates a possible solution.

"if" binding:

<div data-bind="if: ($index() === ($parent.data().length - 1))">I'm the last element</div>

Containerless "if" binding:

<!-- ko if: ($index() === ($parent.data().length - 1)) -->
<div>I'm the last element again</div>
<!-- /ko -->

You can use $index within a foreach binding to get the index of the currently bound item. Use that to compare against the original collection of the parent.

See HERE for more information regarding binding contexts.

这篇关于Knockout.js - foreach 绑定 - 测试是否为最后一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！