knockout.js模板中的唯一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以发送回服务器时,它将自然消失,因为observable将变为其未包装的值.

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/

如果您的标签不在他们的字段附近(在每个标签之前绑定的多个输入可能在表的不同行中),那么您需要查看不同的策略.