jQuery .data()的替代方案是什么？

Question

我非常喜欢jQuery的.data()方法，但并不总是能使用它。经常情况下，我需要通过AJAX传递渲染的HTML模板，并且需要为模板中的每个元素附加元数据。例如：

<ul>
{% for item in itemlist %}
    <li metadata="{{ item.metadata }}">{{ item.name }}</li>
{% endfor %}
</ul>

我知道将属性附加到存储数据是不良做法（在旧版本的IE中甚至可能无效）。那么最佳实践是什么呢？是否有比这种方法更好的选择？

- thebossman

Answer 1

data-*属性。请参见我可以在HTML标记上随意添加属性吗？。

- Ms2ger

---

element.getAttribute("data-foo") 在支持 DOM level 1 的所有浏览器中都可以完美地工作。当然，这也同样适用于您的示例元数据属性，但主要的重点是 data-* 属性保证不会与任何未来的属性冲突。（显然，有效性也很好。） - Ms2ger

Answer 2

如果所涉及的元素都有ID，则需要（无论是什么服务器端语言）将它们注入到JavaScript数组中，其中ID是键，元数据是值。

例如：

<script type="text/javascript">
    var metadata;
    {% for item in itemlist %}
        metadata['{{ item.id }}'] = '{{ item.metadata }}';
    {% endfor %}
    //metadata contains a set of id => metadat pairs
</script>

<ul>
    {% for item in itemlist %}
    <li id="{{ item.id }}">{{ item.name }}</li>
    {% endfor %}
</ul>

- Eric

Answer 3

我认为附加那些除了提供元数据外没有任何作用的类的做法是可以接受的，jQueryUI 的开发者似乎也持有这种观点（参见：.ui-state-error，.ui-state-highlight，.ui-state-active等）。但是我不知道这对你来说是否算作不好的实践。

- mVChr

---

我不认为jQuery UI的ui-state-*类是元数据，因为它们会影响相关元素的样式。我的问题特别涉及不影响样式的数据。 - thebossman

重点在于，如果您从未为这些类分配样式，那么您可以使用类来存储数据而不影响样式。 - mVChr