knockout.js टेम्पलेट्स में अद्वितीय आईडी

Question

मान लीजिए मैं इस तरह knockout.js टेम्पलेट है:

<script type="text/html" id="mytemplate"> 
    <label for="inputId">Label for input</label> 
    <input type="text" id="inputId" data-bind="value: inputValue"/> 
</script> 

अगर मैं (पेज मैं एक ही आईडी के साथ कई जानकारी के साथ अंत पर कई स्थानों में इस टेम्पलेट प्रस्तुत करना और के साथ मान के लिए कई लेबल), जिनके खराब परिणाम हैं। विशेष रूप से, आईडी पर निर्भर सभी कोड ठीक से काम नहीं कर सकते हैं (मेरे मामले में मैं jquery.infieldlabel प्लगइन का उपयोग करता हूं जो एक ही आईडी के साथ कई इनपुट द्वारा भ्रमित हो जाता है)। जिस तरह से मैं अब इस समस्या का समाधान मैं मॉडल है कि मैं टेम्पलेट के लिए बाध्य करने के लिए अद्वितीय आईडी गुण जोड़ने है:

<script type="text/html" id="mytemplate"> 
    <label data-bind="attr: {for: id}>Label for input</label> 
    <input type="text" data-bind="attr: {id: id}, value: inputValue"/> 
</script> 

यह काम करता है, लेकिन यह बहुत ही सुंदर के बाद से मैं अपने मॉडल में इस कृत्रिम आईडी गुण है की जरूरत नहीं है इसका उपयोग किसी और चीज़ के लिए नहीं किया जाता है। मुझे आश्चर्य है कि यहां एक बेहतर समाधान है या नहीं।

Answer 1

एक विकल्प जो कि इस क्षेत्र पर निर्भर नहीं है कि बाध्यकारी डेटा को id संपत्ति पर सेट करता है, जिसे एक अवलोकन करने की आवश्यकता होगी।

ko.bindingHandlers.uniqueId = { 
    init: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     value.id = value.id || ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter); 

     element.id = value.id; 
    }, 
    counter: 0, 
    prefix: "unique" 
}; 

ko.bindingHandlers.uniqueFor = { 
    init: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     value.id = value.id || ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter); 

     element.setAttribute("for", value.id); 
    } 
}; 

आप इसे पसंद का प्रयोग करेंगे:

<ul data-bind="foreach: items"> 
    <li> 
     <label data-bind="uniqueFor: name">Before</label> 
     <input data-bind="uniqueId: name, value: name" /> 
     <label data-bind="uniqueFor: name">After</label> 
    </li> 
</ul> 

नमूना: http://jsfiddle.net/rniemeyer/JjBhY/

नमूदार कार्य करने के लिए एक संपत्ति जोड़ने के बारे में अच्छी बात यह है कि करने के लिए वापस भेजने के लिए जब आप इसे JSON में बदल जाते हैं है सर्वर, तो यह स्वाभाविक रूप से गायब हो जाएगा क्योंकि अवलोकन योग्य अपने अनचाहे मूल्य में बदल जाएगा।

Answer 2

मैं अतीत में कुछ इस तरह किया है:

<ul data-bind="foreach: items"> 
    <li> 
     <label data-bind="uniqueFor: 'before'">Before</label> 
     <input data-bind="uniqueId: true, value: name" /> 
     <label data-bind="uniqueFor: 'after'">After</label> 
    </li> 
</ul> 

तो, यह सिर्फ बाध्यकारी ही incrementing ko.bindingHandlers.uniqueId.counter पर राज्य रखता है:

ko.bindingHandlers.uniqueId = { 
    init: function(element) { 
     element.id = ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter); 
    }, 
    counter: 0, 
    prefix: "unique" 
}; 

ko.bindingHandlers.uniqueFor = { 
    init: function(element, valueAccessor) { 
     var after = ko.bindingHandlers.uniqueId.counter + (ko.utils.unwrapObservable(valueAccessor()) === "after" ? 0 : 1); 
      element.setAttribute("for", ko.bindingHandlers.uniqueId.prefix + after); 
    } 
}; 

आप उन्हें पसंद का प्रयोग करेंगे। फिर, uniqueFor बाध्यकारी को यह जानने की जरूरत है कि यह सही आईडी कैसे प्राप्त करें, यह जानने के लिए फ़ील्ड के पहले या बाद में है या नहीं।

यहाँ नमूना: http://jsfiddle.net/rniemeyer/8KJD3/

तो अपने लेबल (एकाधिक आदानों शायद एक तालिका के अलग-अलग पंक्तियों में प्रत्येक लेबल से पहले बाध्य) अपने खेतों के पास नहीं थे, तो आप एक अलग रणनीति को देखने के लिए की आवश्यकता होगी।

Answer 3

मैं चयनित उत्तर का जवाब नहीं दे सकता, लेकिन मेरे पास कोड का एक उन्नत संस्करण है जो प्रति इनपुट मान के कई अद्वितीय आईडी का समर्थन करता है। यह http://drewp.quickwitretort.com/2012/09/18/0 पर अपने ब्लॉग पर है और यहाँ दोहराया:

ko.bindingHandlers.uniqueId = { 
    /* 
     data-bind="uniqueId: $data" to stick a new id on $data and 
     use it as the html id of the element. 

     data-which="foo" (optional) adds foo to the id, to separate 
     it from other ids made from this same $data. 
    */ 
    counter: 0, 
    _ensureId: function (value, element) { 

    if (value.id === undefined) { 
     value.id = "elem" + (++ko.bindingHandlers.uniqueId.counter); 
    } 

    var id = value.id, which = element.getAttribute("data-which"); 
    if (which) { 
     id += "-" + which; 
    } 
    return id; 
    }, 
    init: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     element.id = ko.bindingHandlers.uniqueId._ensureId(value, element); 
    }, 
}; 

ko.bindingHandlers.uniqueFor = { 
    /* 
     data-bind="uniqueFor: $data" works like uniqueId above, and 
     adds a for="the-new-id" attr to this element. 

     data-which="foo" (optional) works like it does with uniqueId. 
    */ 
    init: function(element, valueAccessor) { 
     element.setAttribute(
     "for", ko.bindingHandlers.uniqueId._ensureId(valueAccessor(), element)); 
    } 
}; 

अब आप स्वत: आईडी के साथ एक रिकॉर्ड के लिए कई लेबल चेक बॉक्स हो सकता है:

<li data-bind="foreach: channel"> 
    <input type="checkbox" data-which="mute" data-bind="uniqueId: $data, checked: mute">  
    <label data-which="mute" data-bind="uniqueFor: $data">Mute</label> 

    <input type="checkbox" data-which="solo" data-bind="uniqueId: $data, checked: solo">  
    <label data-which="solo" data-bind="uniqueFor: $data">Solo</label> 
</li>