Knockout 将 css 类绑定到观察到的模型属性

2024-04-29

我想将 divs css 类绑定到视图模型的属性,如下所示:

<div id="statusIndicator" data-bind="css: selectedPriority">

但这会产生结果:

 <div id="statusIndicator" class=" 0 1 2 3">

这是视图模型:

myViewModel = {
    selectedPriority: ko.observable('High'),
    Company: ko.observable("Bert"),
    Rows: ko.observableArray([
         new row(),
         new row(),
         new row()
    ]),
    Tabs: ['High', 'Medium', 'Low'],

    selectPriority: function (tab) {
        this.selectedPriority(tab);
    }
};

因此,当我加载使用此视图模型的页面时,我希望 div 为:

<div id="statusIndicator" class="High">

我究竟做错了什么?


对于这种情况你可以这样做:

<div data-bind="attr: { 'class': selectedPriority}">

此方法的唯一缺点是它将直接设置类,而不是打开或关闭类,因此如果您使用多个类,那么selectedPriority需要包含完整的类列表。

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

Knockout 将 css 类绑定到观察到的模型属性 的相关文章

  • 使用 knockout js 和 jquery ui 滑块

    我试图弄清楚knockout js是否可以很好地解决以下问题 我有多个滑块想要链接到文本框 当文本框更改时 相应的滑块必须更新为新值 反之亦然 更改滑块值或文本框时 需要调用一个函数 该函数使用所有文本框的输入来计算结果 我有我的快速但肮脏
  • 敲除剑道问题通过计算的可观察值进行绑定

    我尝试使用knockout kendo js 在knockout forEach 模板中声明kendo dropdownlist 控件 以便当新项目添加到knockout 可观察数组时 新的kendo dropdownlist 会在UI 中
  • 根据控制器响应动态更改视图部分

    我正在寻找以下场景的最佳方法建议 用户可以选择一个或多个 csv 文件进行验证 附件 1 单击 验证 按钮会执行验证代码 显示进度条 直到返回输出 返回响应可以是成功消息 也可以是选择验证的每个文件的错误详细信息 附件 2 现在可以使用 上
  • 正确处理浏览器资源

    我有一个网络应用程序 可以在很长一段时间内动态加载数据 数据内有图像的链接 然后在浏览器中呈现这些图像 e g var object Name ko observable Foo Ref ko observable Bar ImageUrl
  • 使用带淘汰赛的引导按钮下拉菜单

    我正在尝试使用 Bootstrap 的精美样式按钮下拉菜单 http getbootstrap com components btn dropdowns淘汰赛 不幸的是 下拉菜单是使用链接而不是
  • KnockoutJS:如何将一个 observableArray 添加到另一个 observableArray?

    我想将选择元素中的选定选项添加到绑定表中 视图模型具有 addItem 函数 该函数使用 ko utils arrayPushAll 将 selectedItems 数组添加到 linkedItems 数组中 但是当我单击 添加 按钮 调用
  • 从.ajax()调用加载knockout.js observableArray()

    这让我很困惑 这一定是我没看到的小事 我正在尝试加载一个非常简单的observableArray通过 ajax 调用进行淘汰赛 javascript we bind the array to the view model property
  • Internet Explorer 中的淘汰赛验证错误?

    在我的剃刀观点中 使用knockout http knockoutjs com据说敲除验证 https github com ericmbarnard Knockout Validation我添加以下行 以实际开始使用 ko 验证 Scri
  • ko.mapping 创建函数,扩展对象

    是否可以在映射过程中修改对象的模式 由于缺乏更好的术语 我想是的 我似乎无法让它发挥作用 我正在尝试这样的事情 var data itemOne someData itemTwo moreData var mapping newItem c
  • 如何强制视图刷新而不从可观察对象自动触发它?

    Note 这主要是为了调试和理解 KnockoutJS 有没有办法显式请求 Knockout 从 已绑定 视图模型刷新视图 我正在寻找类似的东西 ko refreshView 我知道这不是 Knockout 的预期用途 但我仍然想知道是否有
  • knockout.js 将表单加载到 viewModel 中

    我目前正在成功使用 knockout js 来处理应用程序中的所有数据绑定 但是 在每个页面加载时 在我的 document ready 中 我正在执行初始异步数据加载 如下所示 document ready getData 但是 是否可以
  • 淘汰赛js和全球化

    我不知道如何使用淘汰赛 js 和非美国语言环境来处理计算 我的逗号是 并且使用 jquery globalization 插件正确验证 但淘汰计算给我一个 NaN knockout js 是否以任何方式支持这一点 或者是否存在任何解决方法
  • 当鼠标离开父级时,为什么 IE 8 会因引导、淘汰验证和自定义绑定处理程序而崩溃?

    好吧 这是一个疯狂的错误 我和同事无法弄清楚 Internet Explorer 8 崩溃 没有控制台错误消息 当使用具有自定义绑定 数据绑定 的无线电输入更改淘汰可观察值并且您移出父 DOM 容器时 就会发生这种情况 在 IE 8 浏览器
  • 使用自定义绑定处理程序输入文本水印

    我一直在尝试创建一个自定义绑定处理程序 我可以使用它为文本输入字段提供水印行为 By watermark我的意思是 向文本字段添加默认值 这些默认值在焦点时被删除 如果文本字段仍然为空 则在模糊时被替换 我已经设法让它工作 如 jsfidd
  • jQuery Mobile 与 KnockoutJS ListView 问题

    我正在尝试的这个例子 列表视图最终并没有漂亮的外观 谁能建议我做错了什么 这种情况特别发生在 data inset true 上 http jsfiddle net xQ9Uu 1 http jsfiddle net xQ9Uu 1 如果我
  • Knockout:避免绑定中的循环更新

    我有一个与接口交互的自定义 绑定Scribe https github com guardian scribe 一个内容可编辑的所见即所得编辑器 当编辑器内容发生变化时 它会更新关联的可观察量 并在关联的可观察量发生变化时更新编辑器 ko
  • Knockout.js——理解 foreach 和 with

    我一直在阅读 learn knockout js 教程并进行实验 有人可以解释为什么这有效吗 教程 单页应用程序 步骤 2 使用with chosenFolderData and foreach mails table class mail
  • 淘汰赛“闪烁”问题

    我正在使用 KO 构建 SPA 单页应用程序 该应用程序看起来像一本书 用户可以翻页 问题是 每次加载页面时 都会有一小段时间页面 闪烁 用户会看到页面的无样式版本 我猜这是因为很多样式都依赖于 ko 绑定 所以在 ko 完成它 神奇 之前
  • 敲除映射导致堆栈溢出

    我正在尝试淘汰赛和映射插件 并想知道为什么这不起作用 我有一个要使用映射扩展加载的视图模型 function todoListViewModel data ko mapping fromJSON data todos TodoItem op
  • 数组的淘汰赛数组

    传入的数据是这样的 1 2 3 4 5 6 有时是这样的 1 2 4 5 这是 HTML

随机推荐

  • updatepanel (JavaScript) 回发后,jQuery 可排序不起作用

    我对 jQuery 的可排序功能有疑问 当我的页面使用更新面板进行回发时 动态表的排序不再起作用 当按下图像按钮时会触发回发 当按下图像按钮时 会出现一个新行 其中有一个子表 我尝试了这 3 个 JavaScript 代码 但它们似乎都是第
  • 比较 std::functions 是否相等?

    如何比较两个 C 11std functions with operator 并返回true如果两者都说functions 引用同一个函数指针吗 你实际上可以让它工作 target template
  • BNF 可以处理远期消费吗?

    最近我发现了 python 模块pyparsing 一个通过编写来解析数据的绝佳工具grammar 而不是解析器 我对上下文无关语法的概念很陌生 所以请纠正这个问题中的任何错误假设 Pyparsing 可以实现 BNF 巴科斯 诺尔范式 h
  • F# 中序列的递归函数

    这是一个相当微不足道的问题 但快速的谷歌搜索并没有给我答案 为序列编写递归函数的标准方法是什么 对于列表 您可以使用空列表和头 尾模式进行模式匹配 序列的等效项是什么 没有标准的方法可以做到这一点 因为您很少为序列编写递归函数 您应该查看各
  • Mongoose:find() 忽略重复值

    我有一只 聊天 猫鼬Schema它具有以下属性 const schema mongoose Schema recipient type mongoose Types ObjectId required true ref User sende
  • Oracle 连接池类

    我想在 Helper 类中为 Oracle DB 设置连接池 public class DbConnection Data source for the pooled connection private static OracleData
  • 数据库优化命令

    在用户可以下订单的数据库中 最好有一个包含地址的新表 还是每个订单的标题中都有地址数据 这不仅涉及用户 及其地址 还涉及您所销售产品的价格和其他信息 这些信息可能会发生变化after订单已下达 但订单本身必须保持完整 一般来说 有两种方法
  • 如何获取Android 13当前的壁纸?

    似乎getDrawable of WallpaperManager在 Android 13 上没用 因为用户无法获取READ EXTERNAL STORAGE对此的许可 有什么办法可以获取 API 级别 33 上的当前壁纸吗 我的意思是不降
  • 新的 Delphi Rad Studio XE2 中的 FireMonkey (FMX) 包含哪些功能的详细信息?

    我听说德尔福全新 Rad Studio XE2有一个东西叫做火猴这将允许相同的代码构建 Windows 32 Windows 64 和MacOS应用程序 如果这是真的 那么这是巨大的 在哪里可以获得有关 FireMonkey 的技术文档 E
  • 如何预取 Wagtail 帖子标签?

    我有大约 10 个帖子 它生成大约 100 个查询来获取帖子标签 这taggit下面使用的 Wagtail 库supportprefetch related https github com alex django taggit blob
  • 将图像上传到 spring mvc 中的文件夹

    我尝试将图像上传到我的资源中的文件夹 resouces images demo jpg 但它无法运行 你能帮忙在春天上传到我的资源吗mvc 如果我上传到 C test demo jpg 没关系 我的样本 String filename Fi
  • Rails 3.1 资产管道:忽略来自 gem 的资产

    我不太确定实际行为是什么 所以我的第一个问题是 来自 gem 在我的例子中 Spree 的资产 例如 javascript 是否总是被编译 我不使用 Spree 的 javascript 因此不希望编译它们 我不需要它们applicatio
  • R Doplot() 坐标定位器()

    我绘制了 2 个 fasta 序列的点图 使用 seqinr 包中的 dotPlot 我需要从图中提取一些值 x y Dotplot 输出是图像 通用点图可能就是这个 例如 我需要局部对齐的开始和结束值 由紫色线表示所以这里有一个例子 l
  • 了解 JAXB @XmlRootElement 注释

    我正在使用教程在这里 http www vogella com articles JAXB article html jaxb用于理解 JAXB 当作者开始创建文档的根时 作者开始如下 This statement means that c
  • 在rails生产环境中禁用服务器端缓存

    我即将部署一个包含敏感数据的应用程序 因此 不应将任何数据存储到磁盘上 有没有办法禁用服务器端缓存 我找不到任何 我碰巧遇到了这个问题 并且假设您不再需要答案 但是 我相信您正在寻找的是以下内容 config action controll
  • 在javascript中将字符串转换为数字

    我想解析包含经度和纬度的用户输入 我想做的是将字符串强制转换为数字 保留其符号和小数位 但我想做的是当用户输入无效时显示一条消息 我应该遵循哪一个 parseFloat x second new Number x third x fourt
  • 我的 ViewModel 列表中每个项目的数据验证

    要使用正则表达式进行验证 我通常这样做 In my ViewModel RegularExpression MyRegex ErrorMessageResourceName MyErrorMessage public string MyFi
  • 写入 BigQuery 时处理卡住

    我正在使用云数据流将数据从 Pub Sub 消息导入到 BigQuery 表 我正在使用 DynamicDestinations 因为这些消息可以放入不同的表中 我最近注意到该进程开始消耗所有资源 并且消息表明该进程被卡住开始显示 Proc
  • Python 词干分析器问题:词干错误

    你好 我正在尝试用 python 词干分析器来词干 我尝试了 Porter 和 Lancaster 但他们也有同样的问题 他们无法正确阻止以 er 或 e 结尾的单词 例如 它们源于 computer gt comput rotate gt
  • Knockout 将 css 类绑定到观察到的模型属性

    我想将 divs css 类绑定到视图模型的属性 如下所示 div 但这会产生结果 div class 0 1 2 3 这是视图模型 myViewModel selectedPriority ko observable High Compa