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 属性的使用 的相关文章

  • 需要为每个图例文本高图应用背景颜色

    正如我在问题中所说 我希望改变我的传奇 例如 FROM TO 我已经尝试过这个背景颜色 legend backgroundColor CCC layout horizontal floating true align left vertic
  • 是否可以使用 jQuery UI 限制 selectmenu 小部件的高度?

    我一直在尝试通过设置来做到这一点size来源的属性select元素 但它被忽略了 小部件似乎没有任何高度设置选项 是否可以 该小部件当前在隐藏了溢出的 div 对话框内工作 因此下拉列表 始终为 26 个项目 会从 div 中消失 一些CS
  • 如何重置 jQuery 中的单选按钮,以便不检查任何单选按钮

    我在 HTML 中有这样的单选按钮 td td
  • 将毫秒转换为日期 (jQuery/JavaScript)

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

    我想限制 Selectize 标签输入的最少 3 个字符 是否可以 select中有什么事件吗 我有同样的问题 正如 Rory 所提到的 通过插件 其实很简单 你可以找到标签最小字长过滤的官方示例here https github com
  • 如何格式化 内的文本以创建像 gmail 这样的边界框/标签系统,SO

    我正在构建一个边界框 边界框用于gmail 当你写一个联系人时 它会出现一个边界框 另一个例子是 YouTube 当你写标签时 我正在尝试创建一个类似的脚本 但我在这里遇到了一些麻烦 我想将我的脚本放在输入框中 但问题是 当我使用 html
  • 修改某个类的所有html

    我有这个 p class comment date title a c p p class comment date title b b p 我想将标题放在任何元素的 html 中 所以我尝试这样做 comment date html co
  • 如何使用 javascript 确定字符串是否只包含空格?

    如何使用 javascript 确定输入字符串是否仅包含空格 另一个好帖子 更快的 JavaScript 修剪 http blog stevenlevithan com archives faster trim javascript 您只需
  • 使用Rails UJS,如何从函数提交远程表单

    我正在使用Rails UJS 我有一个表单设置来进行远程提交 如下所示
  • jquery覆盖加载栏div

    所以我有一个数据表 并且我正在使用 ajax 获取数据 当检索数据时 表中的数据消失并出现一个小的加载圆圈 我希望数据保留 我知道如何做到这一点 并且加载圆圈出现在表格的中心 不一定是垂直的 至少是水平的 以及稍微透明的背景阻挡稍微超出表格
  • 未捕获的类型错误:无法读取未定义的属性“toLowerCase”

    我收到此错误 它源自 jquery 框架 当我尝试加载准备好的文档上的选择列表时 出现此错误 我似乎无法找到为什么会出现此错误 它适用于更改事件 但在尝试手动执行该函数时出现错误 未捕获的类型错误 无法读取未定义的属性 toLowerCas
  • 防止jsTree节点选择

    我正在使用 jsTree 插件列出文件系统中的文件夹 我需要防止用户在满足特定条件之前更改到另一个节点 下面的代码不会停止传播 我看到了一些使用其他插件的解决方案 但这是一个简单的任务 没有其他插件它一定是可能的 jstree on sel
  • 使用 jQuery 检查输入是否为空

    我有一个表单 我希望填写所有字段 如果单击某个字段然后未填写 我想显示红色背景 这是我的代码 apply form input blur function if input text is empty this parents p addC
  • javascript中输入类型时间的值

    我有这个html
  • 如何在每个组件完成加载后在 Angular 2 中运行 jquery 函数

    我已经尝试了所有生命周期挂钩 但无法实现所需的结果 我需要的结果是触发一个函数 该函数在加载每个元素 组件 后初始化用于单个页面上不同元素的许多 jquery 插件 假设你有这个结构 主页 滑块 小部件 产品旋转器 ETC 这些元素中的每一
  • 使用 jQuery UI 日期选择器选择日历更改 URL

    我正在使用 jQuery UI 选择器 我想知道当有人选择日期时是否有可能 它会自动将他们重定向到 URL 如下所示 index php date 2013 10 15 这是我正在使用的插件 Date
  • 有没有好的 JQuery twitter 小部件可以循环推文?

    我想知道是否有任何 JQuery 小部件提供了循环加载推文的功能 例如在官方小部件中http twitter com about resources widgets widget profile http twitter com about
  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动
  • 限制 jQuery id 字符串吗?

    简而言之 我的问题是字符串在 jQuery 中作为可搜索 id 或可搜索内容有什么限制 更新 我得到了 ID 部分 但不是为什么我什至无法使用该字符串搜索 html 内容 对于任何愿意告诉我一个正则表达式来将模式从 MM dd yy HH
  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人

随机推荐