Jquery html data-bind 属性的使用

我在我的 HTML 文件中遇到过这种代码，在这里，我只是想了解这是什么data-bind属性及其values（例子：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.) The data-bindattribute 不是 jQuery —— 它是一个 HTML5 属性，几乎是 Knockout.js 独有的 (source http://knockoutjs.com/documentation/binding-syntax.html）。数据绑定允许 knockout.js 轻松地将变量与 DOM 元素关联、应用模板方案，甚至应用条件样式。

jQuery 有一个类似名称的.data()让您访问的方法data元素的属性，但这与data-bind.

The jQuery 文档 http://api.jquery.com/data/详细了解有关.data()方法，但要注意的是“从 jQuery 1.4.3 HTML5 开始，数据属性将自动拉入 jQuery 的数据对象”（强调我的）。这并不是特定于data-binding. Using data-binding在jQuery中没有特殊效果。

重点是什么？

2.)“可见”和“模板”位只是解释了knockout.js 应该如何处理绑定数据。有很多选项，例如一个易于理解的选项是text (source http://knockoutjs.com/documentation/binding-syntax.html):

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

基本上我们只是准备应用一个变量myString一旦 Knockout.js 加载模板，就会跳转到该页面。

关于visible文档说，“可见绑定会根据您传递给绑定的值导致关联的 DOM 元素变得隐藏或可见” (source http://knockoutjs.com/documentation/visible-binding.html).

相似地，template “用渲染模板的结果填充关联的 DOM 元素” (source http://knockoutjs.com/documentation/template-binding.html)

所以你的例子是检查正在使用哪个模板，在div，然后使其可见（同时隐藏其他“未使用”的模板）。