唯一ID

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> 

如果我呈現我最終具有相同id多個輸入頁面上的幾個地方這個模板（和與值相同的幾個標籤具有相同的），這具有不良後果。尤其是，所有依賴於ID的代碼可能無法正常工作（在我的例子中，我使用了jquery.infieldlabel插件，它被多個輸入與相同的ID混淆）。我現在解決這個問題的辦法是我加的獨特id屬性，我綁定到模板的模型：

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

這工作，但因爲我要在我的模型這種人工id屬性這不是很優雅這不是用於其他任何事情。我想知道這裏是否有更好的解決方案。

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

我做了這樣的事情在過去的：

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); 
    } 
}; 

你會使用他們喜歡的：

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

所以，它只是不斷增加自身的ko.bindingHandlers.uniqueId.counter綁定狀態。然後，uniqueFor綁定只需知道是否在字段之前或之後知道如何獲得正確的id。

樣品在這裏：http://jsfiddle.net/rniemeyer/8KJD3/

如果您的標籤不靠近他們的領域（也許在一個表中的單獨行每個標籤之前勢必多個輸入），那麼你就需要考慮不同的策略。

Answer 3

我無法回覆所選答案，但是我有一個支持每個輸入值多個唯一ID的代碼的增強版本。這是對我在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)); 
    } 
}; 

現在你可以有多個標記複選框一條記錄自動IDS：

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