2012-03-16 10 views
5

के साथ बाइंडिंग फ़ोरैच बाध्यकारी करते समय क्लास को पहले मान में क्लाइंट लागू करना मैं नॉकआउट में फ़ोरैच का उपयोग करके सरणी को बाध्य करते समय पहले रिकॉर्ड में एक सीएसएस क्लास को लागू करने का तरीका ढूंढने का प्रयास कर रहा हूं। मेरा अंत परिणाम इस तरह दिखने की जरूरत है।टैबलेट फोरच नॉकआउट

var viewModel = function() { 
    this.records = ["A", "B", "C"] 
}; 
कि परिणाम में एक टेम्पलेट के साथ

:

<tbody> 
    <tr> 
     <td class="special-class">A</a> 
     <td>A</a> 
     <td>A</a> 
    </tr> 
</tbody> 

ही एकमात्र विकल्प मैं के साथ एक afterRender कर रहे हैं और पहले बच्चे खोजने और addClass अपने आप jQuery का उपयोग कर रही है ऊपर आ सकता है। क्या कोई बेहतर विकल्प हैं?

अद्यतन:

मुझे पता है मैं में मेरी वास्तविक डेटा इसलिए यहाँ में थोड़ा और अधिक जटिल है कि मेरे उदाहरण में एक गलती की है क्या मेरे टेम्पलेट की तरह लग रहे:

<div id="calendar"> 
    <table> 
     <thead> 
      <tr data-bind="template: {name: 'calendarHeadTemplate', foreach: days}"></tr> 
     </thead> 
     <tbody data-bind="template: {name: 'calendarTemplate', foreach: timeSlots}"></tbody> 
    </table> 
</div> 

<script id="calendarHeadTemplate" type="text/html"> 
    <th data-bind="text: $data"></th> 
</script> 

<script id="calendarTemplate" type="text/html"> 
    <tr data-bind="foreach: $data"> 
     <td data-bind="text: $data"></td> 
    </tr> 
</script> 

और यहाँ है क्या डेटा की तरह दिखता है:

var viewModel = function() { 
    this.days = ["Thu 15", "Fri 16"]; 
    this.timeslots = [["1","2"],["3","4"]]; 
}; 
+0

सीएसएस पहले बच्चे को मेज से बाहर है पाने के लिए? – madcapnmckay

+0

मुझे प्रत्येक –

उत्तर

5

अपने tempalte में, आजमाएँ:

0,123,
<td data-bind="css: {'special-class' : $root.records[0] === $data}"></td> 
+0

के पहले में addClass ("विशेष श्रेणी") जोड़ने की आवश्यकता है, मुझे त्रुटि प्राप्त हो रही है "अपरिभाषित की संपत्ति '0' नहीं पढ़ी जा सकती है;"। मैंने अपने पोस्टिंग को मेरे टेम्पलेट और व्यूमोडेल के साथ अपडेट किया है क्योंकि यह दिखाया गया है कि यह थोड़ा और जटिल है। –

+0

यह है कि मैंने अपना टीडी लुक कैसे बनाया। –

+0

आह ने इसे समझ लिया। मेरे मामले में इसे रिकॉर्ड नहीं कहा गया था। मैंने वास्तव में बदल दिया कि मेरी सामग्री कैसे काम करती है, इसलिए मैंने इसके बजाय $ माता-पिता का उपयोग किया लेकिन यह जवाब मुझे वह जानकारी दी जिसकी मुझे आवश्यकता थी –

2

पिछले समाधान मेरे मामले में काम नहीं करता है। मैं $ सूचकांक == 0 इस्तेमाल किया अगर यह पहला बच्चा है देखने के लिए, मैं भटकना कैसे अंतिम संतान

<td data-bind="css: {'special-class' : $index() == 0}"></td> 
संबंधित मुद्दे