Jquery html data-bind属性使用它

我在我的 HTML文件中遇到过这种代码,在这里,我只是想了解这个数据绑定属性及其值是什么(例如：visible：tabs.active().value ===’sourceXml’ ).它在这做什么？任何人都善意解释.

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

澄清

1.)data-bind属性不是jQuery – 它是一个几乎独占于knockout.js(source)的HTML5属性.数据绑定允许knockout.js轻松地将变量与DOM元素相关联,应用模板方案,甚至应用条件样式.

jQuery有一个类似命名的.data()方法,它允许您访问元素的数据属性,但这与data-bind不同.

jQuery Docs详细介绍了.data()方法,但请注意“从jQuery 1.4.3开始,HTML5数据属性将被自动引入jQuery的数据对象”(强调我的).这不是特定于数据绑定.在jQuery中使用数据绑定没有特殊效果.

重点是什么？

2.)“可见”和“模板”位只是解释了knockout.js应该对绑定数据做什么.有很多选项,例如一个易于理解的选项是文本(source)：

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

基本上我们只是准备在knockout.js加载模板时将变量myString应用到页面.

关于可见文档说,“可见绑定导致关联的DOM元素根据传递给绑定的值隐藏或可见”(source).

类似地,模板“使用渲染模板的结果填充关联的DOM元素”(source)

因此,您的示例是检查正在使用的模板,在div中构造它,然后使其可见(同时隐藏其他“未使用的”模板).