नॉकआउटज टेम्पलेट फोरैच, विशेष प्रथम आइटम

Question

तो मैं अपने दिमाग को इस बारे में समझ रहा हूं। मेरे पास एक फोरच है, टेम्पलेट्स थूक रहा है, और मैं चाहता हूं कि पहले तत्व में विशेष विशेषता हो। अभी तक समाधान मैंने पाया है काम किया है।

यह foreach है:

<h3 class="question">Geografi</h3> 
     <p class="answer" data-bind="template: { name: 'geographyTmpl', foreach: geographyList, templateOptions: { selections: selectedGeographies } }"></p> 

इस टेम्पलेट है:

<script id="geographyTmpl" type="text/html"> 
<input class="geoCheckList" validate="required:true, minlength:2" name="geoCheckList[]" type="checkbox" data-bind='value: $data, attr: { id: "Geo"+$index()},checked: $root.selectedGeographies' /> 
<label data-bind="text: $data, attr: { 'for': 'Geo'+$index()}"></label> 

और मैं जोड़ना चाहते हैं: "मान्य =" आवश्यक: सच है, MINLENGTH: 2 " पहले तत्व के लिए।

मुझे क्या करने की ज़रूरत है?

अगर यह मदद करता है, तो यह jQuery सत्यापन के लिए है।

Answer 1

KnockoutJS में पहला तत्व के बारे में एक और सवाल के लिए मेरा उत्तर जाँच foreach

Skip item in foreach knockout js array?

<div data-bind="text: ItemsArray[0].someProperty"></div> 
<div data-bind="foreach: ItemsArray"> 
<!-- ko if: $index() == 0 --> 
    <div data-bind="text: someProperty"></div> 
<!-- /ko --> 
<!-- ko if: $index() != 0 --> 
    <div data-bind="text: anotherDifferentProperty"></div>  
<!-- /ko --> 
</div> 

Answer 2

आप एक बूलियन लौटने के लिए एक गणना किए गए अवलोकन योग्य का उपयोग करने में सक्षम होना चाहिए और यदि बूलियन सत्य है तो आप विशेषता (मानक नॉकआउट) दिखाते हैं?

कुछ इस तरह हो सकता है

this.IsFirst = ko.computed(function() { 
    return this == Array[0]; 
}, this); 

यह hacky लगता है, लेकिन

काम करते हैं या उपयोग करना चाहिए

{{if $item.first === $data}} 

Answer 3

मैं नहीं बल्कि एक टेम्पलेट से custom binding का उपयोग करें, और उसके बाद प्राप्त करने के लिए परीक्षा होगी बाध्यकारी कॉन्टैक्ट से $ इंडेक्स, और केवल $ अनुक्रमणिका होने पर मान्य विशेषता जोड़ें 0.

ko.bindingHandlers.yourBindingName = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     // Create your input and label elements here then 
     $(element).append(// add your new elements in here); 
    } 
};