在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數據

回答

相關問題