Jquery html data-bind 属性的使用

2024-03-12

我在我的 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,然后使其可见(同时隐藏其他“未使用”的模板)。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery html data-bind 属性的使用 的相关文章

  • jQuery.data() 存储在哪里?

    jQuery 将值存储在哪里data 它设置为 DOM 对象 是否有某种变量 例如jQuery dataDb或者什么 甚至可能是私人的东西 有什么办法可以访问这个对象吗 在内部 jQuery 创建一个名为的空对象 cache 用于存储您通过
  • 如果 div 为空,则删除或隐藏该 div

    我知道这应该很简单 但无法弄清楚 这是代码 div class cols lmenu item1 div div div 如果 leftmenu 为空 我只需要删除 leftMenuWrapper 这是我一直在使用的 leftmenu em
  • 将毫秒转换为日期 (jQuery/JavaScript)

    我有点漫无目的 但我会尽力保持清晰 我很无聊 所以我正在做一个 呼喊箱 我对一件事有点困惑 我想获取输入消息的时间 并且想确保我获取服务器时间 或者至少确保我没有获取用户的本地时间 我知道没关系 因为这东西除了我之外不会被任何人使用 但我想
  • 如何从 javascript 有效地访问 gzipped xml?

    我需要从 javascript 实际上是从 Greasemonkey 有效地访问一个大的 gzipped xml 文件 不幸的是 服务器不提供 Content Encoding 标头 并且 Content Type 是 applicatio
  • 如何在ListBox中加载大量数据? ASP.NET MVC 应用程序

    我正在使用 ASP NET MVC 应用程序 要求用户能够从可能包含超过 30 000 个条目的列表框中选择一个项目 是否有一种使用 Ajax 调用来填充此 ListBox 内容的动态方法 效果良好 我是否最好只填充服务器上的 ListBo
  • 如何将图像添加到 jquery 工具提示

    我还没有看到这个确切的问题得到解决 如果有 请指出它 我正在使用 jquery 的 ui 工具提示 我有一个链接 当您将鼠标悬停在它上面时 我想显示一张图像 到目前为止 没有什么对我有用 标题中的 ui 代码 HTML see a a
  • jQuery 数据与 Attr?

    两者的用法有什么区别 data and attr使用时data someAttribute 我的理解是 data存储在 jQuery 中 cache 而不是 DOM 因此 如果我想使用 cache对于数据存储 我应该使用 data 如果我想
  • 在 setTimeout 中传递 $(this)

    如何将 this 作为 setTimeout 函数 方法 中的参数传递 这是我到目前为止正在做的事情 它正在发挥作用 var Variables Variables ResizeTimer false Variables obj null
  • 如何获取 jquery datepicker 的当前活动实例

    我在单个页面上有多个日期选择器控件绑定到输入控件 当我单击链接到该输入的任何输入控件时 日期选择器控件将可见 现在我想要获取在另一个 JS 事件上显示日期选择器的当前实例的输入 是否可以 您可以尝试使用 datepicker getInst
  • 如果未选中复选框,jquery 清除输入字段

    我有以下 jquery 如果选中复选框 用户可以填写表单中的其他字段 我想要的是如果未选中该复选框 则清除附加输入字段值 document ready function input checkbox attr checked false x
  • PhoneGap/Cordova:如何使用cookies(iOS)?

    我有一个适用于 iOS 的 PhoneGap Corodova 项目 在 iOS 模拟器上构建时 我使用了 Jquery Cookies 它们很好 但是 既然我的设备上有该应用程序用于测试 它们就不再工作了 我猜这只是 iOS 不支持的东西
  • jQuery .append 不起作用

    我想在我的表单中插入一些东西 这些东西被硬编码到插件中 我不想弄乱插件文件 所以我发现 append 我写过类似的东西 据我所知它应该有效 Chrome 中的控制台没有显示任何错误 这是有什么问题吗 由于 wordpress 安全模式 我正
  • 使用 parsley.js 支持每个字段多个自定义错误消息

    我正在尝试使用 parsley js 验证一个简单的表单 并且我对 parsley js 非常初学者 我想使用 window ParsleyValidator addValidator 方法在一个自定义验证方法中显示多个错误消息 所以我尝试
  • 匹配数组中的对象并合并

    UPDATE 我有一个名为的对象数组cars包含 li 标签 其中包含有关汽车的属性数据 例如价格 汽车类型等 我的目标是 如果这些汽车符合某些标准 则将它们合并到一个列表中 要求 快速性能 保持相同的汽车数组结构 Main Goal Ma
  • 使用 javascript 将 html 文本渲染为位图,无需服务器端代码

    我需要使用 javascript 代码来转换 html 中的文章 帖子 以便最终用户以位图的形式查看 有没有办法在没有服务器端代码的情况下做到这一点 example p testing text here p 您可以使用例如html2can
  • jQuery id 选择器在有 .在 ID 中[重复]

    这个问题在这里已经有答案了 我的html代码如下 div class chatbox html markup which is validated div 在上面的代码中dipesh parmardiv 动态添加 我正在使用以下代码访问它
  • 如何获取传单标记簇中点击事件的图块?

    这是我的代码 function onMapClick e e originalEvent defaultPrevented true var orig e originalEvent console log orig target map
  • 在 ASP.NET MVC 4 中使用 jQuery Mobile 1.3 面板时的双滚动条

    我无法弄清楚这一点 将以下代码放入布局页面并在浏览器中查看后 我将显示 2 个垂直滚动条 div div 遇到了类似的问题 并注意到只有在使用我的自定义主题时才出现这种问题 我以错误的顺序将自定义主题添加到页面 这导致了问题 正确的顺序是
  • 如何使用JQuery和Django(ajax + HttpResponse)?

    假设我有一个 AJAX 函数 function callpage ajax method get url abc data x 3 beforeSend function success function html IF HTTPRESPO
  • jqGrid刷新本地数据(JSON对象)

    我正在尝试将 jqGrid 与本地数据一起使用 但发现了几个问题 我正在初始化这样的事情 function refreshGrid grid results grid jqGrid data results datatype local c

随机推荐