jquery html數據綁定屬性使用其

我已經遇到這種類型的代碼在我的HTML文件，在這裏，我只是想了解這是什麼data-bind屬性和它的values（例如：visible: tabs.active().value === 'sourceXml'）。它在這裏做什麼？任何一個善意解釋。jquery html數據綁定屬性使用其

<div style="border: solid #ddd; border-width: 0 1px 1px 1px; padding: 16px 12px 8px 12px; margin-top: -20px"> 
    <div data-bind="visible: tabs.active().value === 'sourceXml'"> 
    <div data-bind="template: { name: 'sourceXml', data: sourceXml }"></div> 
</div> 

<div data-bind="visible: tabs.active().value === 'searchTerms'"> 
    <div data-bind="template: { name: 'searchTerms', data: searchTerms }"></div> 
</div> 

<div data-bind="visible: tabs.active().value === 'outputFormat'"> 
    <div data-bind="template: { name: 'outputFormat', data: outputFormat }"></div> 
</div> 

<div data-bind="visible: tabs.active().value === 'savedQueries'"> 
    <div data-bind="template: { name: 'savedQueries', data: savedQueries }"></div> 
</div> 
</div>

來源

2014-07-22 Sakthivel

澄清

1）的data-bind屬性不是jQuery的 - 它是一種HTML5屬性幾乎獨佔knockout.js（source）。數據綁定允許knockout.js輕鬆地將變量與DOM元素相關聯，應用模板方案或甚至應用條件樣式。

jQuery有一個名稱相似的.data()方法，可讓您訪問元素的data屬性，但這與data-bind不同。

的jQuery Docs細節更多關於.data()方法，但要注意（重點煤礦）「在jQuery 1.4.3 HTML5數據 - 的屬性會自動到jQuery的數據對象拉」。 這不是特定於data-binding。在jQuery中使用data-binding沒有特殊效果。

有什麼意義？

2.）「可見」和「模板」位僅僅解釋了knockout.js應該如何處理綁定數據。有很多的選擇，例如一個易於理解的一個是text（source）：

<div>My favorite string is: <span data-bind="text: myString"></span></div>

基本上我們正準備將可變myString頁面一旦knockout.js加載模板。

關於visible文檔說，「可見的結合導致根據傳遞到結合的值相關聯的DOM元素成爲隱藏的或可見的」（source）。

同樣，template「填充與呈現的模板的結果相關聯的DOM元素」（source）

所以你的例子是檢查正在使用哪個模板，構建它在div，然後使其可見（同時隱藏其他「未使用」的模板）。

來源

2014-07-22 12:08:09

jquery html數據綁定屬性使用其

回答

相關問題