在html中预填充jQuery数据

jQuery具有非常酷的功能/方法“.data”，我想知道是否有一种方法可以在代码中存储数据，以便jQuery在完成html呈现时可以使用它。假设我有一个中继器和循环出来的孩子，我想添加一些数据给那些没有使用类的孩子等我将不得不添加JavaScript到该中继器只是为了添加“jQuery数据”的东西或有一些更好办法？在html中预填充jQuery数据

来源

2010-05-12 Mikael Gidmark

还有就是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!');

来源

2010-05-12 11:58:49 PetersenDidIt

HTML 5有一个以“data-”开头的属性的新标准。在这里看到link text。

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

来源

2010-05-12 12:28:26

这将如何在不同的浏览器中工作？（IE 7,8，FF 3 Safari 4，Chrome） – 2010-05-12 13:11:23

您将不得不使用XHTML文档类型，然后在稍后阶段转到HTML5。目前的浏览器应该忽略该属性。 – 2010-05-12 13:24:20

你在想“存储对象数据比在元素本身更好吗？”？

例如，你有一碗水果？

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())

这使得它十分简单，当一个事件发生时访问数据。例如改变渲染程序包括一个click事件：

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

现在，人们可以很容易地认为，这是愚蠢的通过它连接到这样的元素复制的对象，因为你已经有了对象即，在脚本的范围内，并且如果你写对了，就在对象的关闭中。这些可能是有效的论点。但是，我同意，这是非常酷:-)

来源

2010-05-13 14:22:48

在html中预填充jQuery数据

回答

相关问题