javascript - 如何根据 Knockout js 模型设置控件样式

标签 javascript jquery forms knockout.js

您好,我有一个带有组合框的表单,用于管理多种类型的地址:

http://jsfiddle.net/JjH3x/

添加新地址后,将启用字段以输入地址信息等。我想在添加或填写地址类型时向组合地址类型添加一个图标复选标记或其他内容,以便用户知道组合中的哪些地址类型已经有数据。

如有任何帮助,我们将不胜感激。

非常感谢

最佳答案

我已经 fork 了你的 jsFiddle 并为你做了一个如何完成这样的事情的例子 - 你可以在这里找到它:http://jsfiddle.net/Mw2qr/

我所做的一些更改包括:

  • 添加一个新的 computed observable到名为 isCompleteAddress 函数对象(这是检查地址中的所有字段是否包含某些内容的对象 - 如果需要,您可以改进/扩展逻辑)<
  • 我已将 valueUpdate:'afterkeydown' 添加到您的表单中以获得即时验证。
  • 最后,我添加了一些地址完整和不完整的示例输出。

请注意,您不仅应该依赖客户端逻辑来检查是否所有地址都已填写 - 确保您还包括一些服务器端逻辑;)

-- 更新

要回答有关如何将颜色(或任何 CSS 样式)应用于代表“已填写”地址的 select option 元素的问题的特定部分,我对初始的 jsFiddle 进行了一些调整——最终结果可在此处获得:http://jsfiddle.net/Mw2qr/1/

请注意,这可能是我今年最大的 hack - 似乎做你想做的事必须涉及一点 jQuery 魔法(我希望这可以使用纯 knockoutJS 解决 - 但据我所知,通过阅读关于 options 绑定(bind) in the documentation ,您想要实现的目标不受开箱即用的支持 - 但是,我的简单 hack 应该可以工作。它绝不是漂亮的,所以我希望你可以(至少 ) 受到我的解决方案的启发,也许会想出更优雅的东西 ;)

关于javascript - 如何根据 Knockout js 模型设置控件样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12165112/

相关文章:

angularjs - 向 iframe 提交表单数据的 Angular 方式

javascript - 转换JQuery Datepicker的日期格式

javascript - 使用 JS 在 Rails View 中预览图像

javascript - 使用javascript解析html字符串

javascript - 在追加之前编辑对象

jquery - 让 yadcf(用于数据表)在 Angular 2 (jQuery 3) 中工作

javascript - 如何在 D3/javascripts 中将一列绘制为 x 轴,另一列绘制为 y 轴

javascript - 在已经制作好的 Canvas 上创建轨迹

jquery - 选择带有 'Other' 选项的框以显示输入文本字段。如何使用 jquery 获取表单提交的值?

asp.net-mvc - umbraco mvc 表面 Controller ,无法从 HttpPost Action 返回 View