Question

jQuery有非常酷的功能/方法“.data”，我想知道是否有一种方法可以在代码中包含数据，以便jQuery可以在完成html的渲染时使用它。假设我有一个转发器并循环出来的孩子，我想在不使用类等的情况下向这些孩子添加一些数据。我是否必须将javascript添加到该转发器只是为了向“jquery的数据”添加内容或者是否有一些更好的方式是什么？

Answer 1

metadata plugin可能正在做你正在谈论的事情

例如，您可以:(您可以通过设置选项从不同的格式中选择）

<li class="someclass {some: 'data'} anotherclass">...</li>
OR
<li data="{some:'random', json: 'data'}">...</li>
OR
<li><script type="data">{some:"json",data:true}</script> ...</li>
OR
<li data-some="'random'" data-json="'data'">...</li>

之后你就可以做到：

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'data' )
    alert('It Worked!');

Answer 2

HTML 5为以“data-”开头的属性提供了新标准。见link text。

您可以使用它来存储数据并使用选择器来解析数据。

Answer 3

您是否在考虑“存储对象数据的最佳位置是什么？”

例如，你有一碗水果吗？

function Fruit(name, color){
    this.name = name
    this.color = color
}
var apple = new Fruit("apple", "red")
var orange = new Fruit("orange","orange")
var bowl = [apple, orange]

现在你在页面上渲染水果碗了吗？

Fruit.prototype.render = function(){
    return createElement('li').html(this.name)
}
$.each(bowl, function(i, fruit){
     $('#fruitbowl').append(fruit.render())
}

确定。现在你可以通过改变最后一行并将实际的水果对象附加到它们的元素渲染中来简单地将对象添加到元素中：

     $('#fruitbowl').data('obj', fruit).append(fruit.render())

这使得在事件发生时访问数据非常容易。例如，更改渲染例程以包含单击事件：

Fruit.prototype.render = function(){
    var el = createElement('li').html(this.name)
    el.click(function(){
        alert('You clicked on an ' + $(this).data('obj').name)
    }
}

现在人们可以轻易地争辩说，通过以这种方式将对象附加到元素来复制对象是愚蠢的，因为你已经拥有了对象，在脚本的范围内，如果你写得正确，在关闭对象。这些可能是有效的论点。但是，我同意，这很酷： - ）

在html中预填充jQuery数据

3 个答案: