javascript - 限制foreach循环淘汰赛

Question

我有这个淘汰赛映射我的数组从下面的 ajax 调用中检索。

function InvoiceViewModel(data) {
var self = this;

self.survey = data;

}

阿贾克斯调用

$.ajax({
    url: 'http://localhost:43043/api/damage',
    type: 'GET',
    headers: { 'Accept': 'application/json' },
    data: {
        orderNumber: num,
        category: cat
    },
    success:
           function (data) {
               var usingRoutData = document.URL;
               ko.applyBindings(new InvoiceViewModel(data));
           },

    error: function () {
        alert('failure');
    }

});

我的阵列

 var test = {
  Name: Blah,
  Attributes: [
               {Name: Test, Type: Photo, Year:1988},
               {Name: Test, Type: Photo, Year:1988},
               {Name: Test, Type: Photo, Year:1988}
              ]
            };

我如何绑定我的数据

 <div id="invoiceBodyWrapper">
<div data-bind="template: { name: 'invoice-template', foreach: surveys }">
</div>

<div class="invoiceWrapper">
    </div>
    <div id="completePictureWrapper" data-bind="template: { name: 'photo-template',     foreach: new Array(Attributes) }"></div>

</div>
</script>

<script type="text/html" id="photo-template">
<!-- ko if: classification === 'photo' -->
<div id="pictureWrappers">
    <img class="img" data-bind="attr: { src: 'http://myimagepath/download/full/' +    $index()+1 }" />
</div>
<!-- /ko -->
 </script>
  <script src="~/Scripts/DamageInvoiceCreation.js"></script>

我需要一种方法来限制我的属性 foreach 循环只显示 3 个属性中的 2 个。我只发现了一些关于如何做到这一点的东西，它们似乎非常复杂。我无法想象在淘汰赛中没有一种简单的方法可以做到这一点。

score 7 · Accepted Answer

如果你总是有 3 个属性并且你总是只想显示其中的 2 个，那么你完全不需要 foreach 。

但是，有一个特殊的绑定上下文变量$index()，它可以让你做一些基本的隐藏，尽管它不会阻止渲染。因为 $index 是从 0 开始的，所以条件是$index() < 2. 正如安德烈在评论中指出的那样，$indexis an observable，所以你必须用括号将它作为一种方法来调用，否则比较不会像你期望的那样（你将比较一个 int 和一个函数）。

<ul data-bind="foreach: survey.Attributes">
    <li data-bind="visible: $index() < 2">
        Name: <span data-bind="text: Name"> </span><br/>
        Type: <span data-bind="text: Type"> </span><br/>
        Year: <span data-bind="text: Year"> </span><br/>
    </li>
</ul>

如果您想在 foreach 循环上使用通用限制器，那么您是对的，这并不简单。您必须进行自定义绑定。

您可以考虑的另一种方法是在视图模型中预处理您的数据。当您设置时this.survey = data;，您可以删除此时不想显示的任何属性。

编辑：我从您的编辑中看到您了解ko: if伪元素。我完全忘记了这些，但是您可以轻松地使用一个来防止呈现超出某个索引的模板项。仍然会foreach评估 observable，它本身不应该有任何巨大的开销。

score 7 · Accepted Answer

JavaScript 数组包括很好的slice方法，可以很好地满足您的需求：

template: { name: 'photo-template', foreach: Attributes.slice(0,2) }

但正如@Patrick-M 提到的，你不需要循环：

template: { name: 'photo-template', data: Attributes[0] }
template: { name: 'photo-template', data: Attributes[1] }

我的重复绑定包括一个用于限制重复次数的选项：

<div data-bind="repeat: { foreach: Attributes, count: 2 }"
      data-repeat-bind="template: { name: 'photo-template', data: $item() }">
</div>

score 3 · Accepted Answer

您可以使用有限的数组限制创建计算：

var limited = ko.computed( function() {
   return Attributes.slice(0, limit);
});

那么你所要做的就是foreach limited。您甚至可以添加某种“更多”元素：

<!-- ko if: Attributes().length > limit -->
    <div class="more">...</div>          
<!--/ko-->

我希望它对后代有所帮助；）

score 1 · Accepted Answer

放置 .slice(0,1) 以从您的 FOREACH 数据绑定数组（模型）中获取前 2 个项目。

.slice(0,1)

像这样的东西

<!-- ko foreach: { data: items().slice(0, 1) } -->
    <div>
        Your html here!
    </div>
<!-- /ko -->

或者，如果您愿意

<tbody data-bind="foreach: people.slice(0, 1)">
    <tr>
        <td data-bind="text: firstName"></td>
        <td data-bind="text: lastName"></td>
    </tr>
</tbody>

关于 slice() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice

score 0 · Accepted Answer

您可以通过这种方式限制循环：

for(var i=0;i<data.length;i++){
   if(i>1){
      return false;
   }
}

score 0 · Accepted Answer

我通过将原始数组项的子集推送到我的视图模型中的另一个数组，然后绑定到子集数组来解决了类似的问题。

score 0 · Accepted Answer

可以尝试如下：

 <!-- ko foreach: { data: attributes, as: 'item' } -->
    <!-- ko if: $index() < 2 -->
    <span class="item" data-bind="text:item.name"></span>
    <!-- /ko -->
    <!-- /ko -->

例子：

<ul data-bind="foreach: listItems">
                <li data-bind="attr: {id: id} ">
                  <a href="#" data-bind="text: label"></a>
                </li>
 </ul>

score 0 · Accepted Answer

foreach 中最简单的方法是使用 $index

<!-- ko foreach: { data: Attributes, as: 'item' } -->
<!-- ko if: $index() < 2 -->
<span class="item" data-bind="text:item.name"></span>
<!-- /ko -->
<!-- /ko -->

javascript - 限制foreach循环淘汰赛

8 回答 8

Related

Reference