1

我正在开发一个简单的网络应用程序，我需要在某些事件或条件后更新显示的数据。这些数据分散在许多不同的地方和完全独立的标记结构中。我过去使用过类，但在使用类编辑数据时发现了一些危险的情况，这让我感到很痛苦（尤其是当我们使用 OOCSS 并且我们想要更改许多类并且不应该绑定到 js 数据或行为时） . 下面的解决方案在这方面应该是防弹的，但我从来没有见过它使用过，我担心我可能会遗漏一些东西。像下面这样的解决方案有什么缺点吗？

下面的示例代码 - 使用 jQuery

以下可能绑定到特定的数据更改事件：

$('.data[data-type=user_data]').each(function(){
    $(this).find('.data[data-type=user_name]').html($.user.userName)
    .end().find('.data[data-type=user_location]').html($.user.userLocation)
    .end().find('.data[data-type=incident_date]').html($.user.incidentDate)
    .end().find('.data[data-type=incident_cost]').html($.user.incidentCost)
    .end().find('.data[data-type=user_hair_color]').html($.user.hairColor);

      //more data will be added here ...

});

标记将在某些地方是这样的：

<div class="data incident_result bubbled_box" data-type="user_data">
<h3>Some heading</h3>
<ul>
    <li>Username:       <span class="data highlight name" data-type="user_name">Igor Wassel</span></li>
    <li>User location:  <span class="data" data-type="user_location">Estonia</span></li>
    <li>Provider:       <span class="data" data-type="incident_date">21/08/11</span></li>
</ul>

标记将在其他地方包含其他数据，但在完全不同的 html 结构中。

4

1 回答 1

1

使用 data 属性使用 javascript 编辑内容有什么缺点吗？

不，除非您写入这些属性并使用 JavaScript 将它们读回。不幸的是，正如太多人所做的那样。DOM 不是存储 JavaScript 状态的地方。

data否则，通过-attributes将数据从服务器发送到客户端是完全可以的。为了保持完全的故障安全，请在所有data-attributes 中附加一些通用前缀。

只有我怀疑按属性值选择元素是否有效。类似getElementsByName的方法针对任务进行了优化。

至少可以扩展内部 jQueryfind循环以遍历所有元素并自动检索它们的值。

$('.data[data-type=user_data] *').each(function (el) {
    el = $(el);
    type = el.data('type');
    if (type) {
        el.html($.user[type.toCamelCase()]);
    }
});

String.prototype.toCamelCase = function () { /* implement me */ };

并且不要忘记 HTML5 doctype 声明。

于 2011-09-30T10:54:02.250 回答