限制foreach循环淘汰赛

Question

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

function InvoiceViewModel(data) {
var self = this;

self.survey = data;

}

Ajax Call

$.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个.我只发现了一些关于如何做到这一点的事情,它们看起来非常复杂.我无法想象在淘汰赛中没有一种简单的方法可以做到这一点.

Answer 1

如果你总是有3个属性,并且你总是只想显示其中的两个属性,那么你就不需要完全预知它们.

但是,有一个特殊的绑定上下文变量$index(),它可以让你做一些基本的隐藏,虽然它不会阻止渲染.因为$ index是从0开始的,所以条件是$index() < 2.正如安德烈在评论中指出的那样,$index是一个可观察的,所以你必须用括号作为一种方法来调用它,否则比较将不会达到预期的效果(你将比较一个函数的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循环上使用通用限制器,那么你是对的,这并不简单.您必须进行自定义绑定.

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

编辑:我从编辑中看到你知道ko: ifpsuedo-elements.我完全忘记了这些,但您可以轻松地使用一个来防止渲染模板项超出某个索引.该foreach会还评估观察到的,不应该由它本身有什么样的巨大开销.

Answer 2

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>

Answer 3

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

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