Knockout.js 模板中的唯一 ID
假设我有如下的 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 的输入(以及多个具有相同 for 值的标签),其中会产生不好的后果。特别是,所有依赖于 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 属性。我想知道这里是否有更好的解决方案。
Suppose I have knockout.js template like this:
<script type="text/html" id="mytemplate">
<label for="inputId">Label for input</label>
<input type="text" id="inputId" data-bind="value: inputValue"/>
</script>
If I render this template in several places on the page I end up with several inputs with the same id (and several labels with the same for value), which has bad consequences. In particular, all code that depends on ids may not work properly (in my case I use jquery.infieldlabel plugin that gets confused by multiple inputs with the same id). The way I solve this issue now is I add unique id attribute to the model that I bind to the template:
<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>
This works, but it's not very elegant since I have to have this artificial id attribute in my models that is not used for anything else. I wonder if there is a better solution here.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
另一种不依赖于字段绑定顺序的替代方法是让绑定在数据本身上设置一个 id 属性,该属性需要是可观察的。
(JSFiddle 示例也可用)
向可观察函数添加属性的好处是当你将其转换为 JSON 发送回服务器时,它会自然消失,因为可观察值将变成其未包装的值。
An alternative that does not rely on the order that the fields are bound is to have the binding set an
id
property on the data itself, which would need to be an observable.(a JSFiddle sample is also available)
The nice thing about adding a property to the observable function is that when you turn it into JSON to send back to the server, then it will just naturally disappear as the observable will just turn into its unwrapped value.
我过去做过类似的事情:
您可以像这样使用它们:
因此,它只是保持绑定本身的状态递增
ko.bindingHandlers.uniqueId.counter
。然后,uniqueFor
绑定只需要知道它是在字段之前还是之后,就知道如何获取正确的id。示例如下:http://jsfiddle.net/rniemeyer/8KJD3/
如果您的标签不在其附近字段(每个标签之前绑定的多个输入可能位于表的不同行中),那么您需要考虑不同的策略。
I have done something like this in the past:
You would use them like:
So, it just keeps state on the binding itself incrementing
ko.bindingHandlers.uniqueId.counter
. Then, theuniqueFor
binding just needs to know whether it is before or after the field to know how to get the correct id.Sample here: http://jsfiddle.net/rniemeyer/8KJD3/
If your labels were not near their fields (multiple inputs bound before each label perhaps in separate rows of a table), then you would need to look at a different strategy.
我无法回复所选答案,但我有一个增强版本的代码,支持每个输入值有多个唯一 id。它在我的博客上 http://drewp.quickwitretort.com/2012/09/18/ 0 并在此处重复:
现在您可以使用自动 ID 为一条记录设置多个带标签的复选框:
I can't reply to the selected answer, but I have an enhanced version of the code that supports multiple unique ids per input value. It's on my blog at http://drewp.quickwitretort.com/2012/09/18/0 and repeated here:
Now you can have multiple labeled checkboxes for one record with automatic ids: