Sınır foreach döngü devre dışı bırakılması

Question

Aşağıdaki ajax çağrısından alınan dizilimin bu eşleşme eşlemesini eşleştiriyorum.

function InvoiceViewModel(data) { 
var self = this; 

self.survey = data; 

} 

Ajax Çağrı

$.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'); 
    } 

}); 

Benim Dizisi

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

ı bağlayıcı am nasıl veri

<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> 

Özniteliklerimi foreach döngüsünü yalnızca 3 özniteliğin 2'sini göstermek üzere sınırlandırmanın bir yoluna ihtiyacım var. Bunu nasıl yapacağım konusunda sadece birkaç şey buldum ve çok karmaşık görünüyorlar. Bunu nakavt yapmak için basit bir yol olmadığını hayal edemiyorum.

Answer 1

bu şekilde bir döngü sınırlayabilir:

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

Answer 2

her zaman 3 özelliklerine sahip ve her zaman sadece 2 tanesi göstermek istiyorsanız, tam olarak, bunları foreach gerekmez. Ancak, $index() numaralı özel bağlama bağlamı değişkeni var, ancak bazı temel gizlemeyi yapmanıza izin veriyor, ancak görüntülemeyi engellemezdi. $ Index 0 tabanlı olduğundan, koşul $index() < 2'dur. Andrey yorumlarda belirtildiği gibi, $index is an observable, böylece bir yöntem olarak parantez ile çağırmanız gerekir veya karşılaştırmalar beklediğinizi yapmayacaktır (bir int'i bir işleve karşı karşılaştırırsınız).

<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> 

Eğer bir foreach döngü genel sınırlayıcısı istiyorsanız, haklısın, bu kadar basit değil. Bir custom binding yapmalısınız.

Göz önünde bulundurmanız gereken başka bir yaklaşım, verilerinizi viewmodel'de ön işlemden geçirmektir. this.survey = data;'u ayarladığınızda, o noktada görüntülemek istemediğiniz niteliklerden herhangi birini kaldırabilirsiniz.

Düzenleme: Düzenlemenizden, ko: if psuedo öğelerini bildiğinizi görüyorum. Bunları tamamen unuttum, ancak şablon öğelerini belirli bir dizinin ötesinde engellemek için kolayca bir tane kullanabilirsiniz. foreach hala gözlemlenebilir olanı değerlendirecek, ki bu da kendi başına büyük bir yüke sahip olmamalıdır.

Answer 3

JavaScript diziler güzel ihtiyacını doldurmalıdır mükemmel slice yöntemini içerir:

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

Fakat Patrick-M sözü @, bir döngü gerekmez olarak:

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

Benim Repeat ciltleme, tekrar sayısını sınırlamak için bir seçenek içerir:

Answer 4

Özgün dizi öğelerinin bir alt kümesini, görünüm modelimde başka bir diziye iterek ve ardından alt küme dizisine bağlayarak benzer bir sorunu çözdüm.

Answer 5

Sen sınırlı dizi limitli bilgisayarlı oluşturabilirsiniz:

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

Sonra yapmanız gereken tek şey sınırlı foreach. Hatta "daha" öğesinin somekind ekleyebilirsiniz:

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

Ben başka nesiller için yararlı olacağını umuyoruz;)