knockout.js应用样式于下拉选项

我编码了使用knockout.js下拉列表：knockout.js应用样式于下拉选项

次（）是使用REST经由JSON实例化的对象的阵列。 displayName是这些对象的String属性，不可观察。我想比较displayName属性，如果它匹配某个单词，我想对该选项应用一些样式。

<select id="views" data-bind=" 
    options: views(), 
    optionsText: 'displayName', 
    optionsValues: 'id', 
    value: selectedView, 
    style: { color: (displayName == 'some arbitrary text') ? 'red' : 'black' } 
"></select>

下拉按预期工作时，我不添加样式绑定到它。我可以做一个简单的比较（即1 == 1），它可以工作（尽管所有的选项都变成红色）。我想要做的是将'displayName'属性与一些任意文本进行比较。它现在只是一个字符串，包含任何文本，但稍后将从我的ViewModel调用该字符串。

这将允许我设置不同风格的某些选项，如果我的视图模型需要它们。有任何想法吗？

来源

2013-07-17 Husman

问题是什么？另外，什么是'displayName'？（是否可观察？） – SLaks

views（）是一个使用REST通过JSON实例化的对象数组。 displayName是这些对象的String属性，不可观察。我想比较displayName属性，如果它匹配某个单词，我想对该选项应用一些样式。 – Husman

==比较目前不起作用。我可以读取displayName并显示在下拉菜单中，但由于某些原因，我无法将它与另一个字符串进行比较。 – Husman

我的例子中的解决方案是使用optionsAfterRender回调函数：

<select id="views" data-bind=" 
         options: views(), 
         optionsText: 'displayName', 
         optionsValue: 'id', 
         value: selectedView, 
         optionsAfterRender: optionsAfterRender 
         "></select>

然后在我的模型：

self.optionsAfterRender = function(option, view) { 
      if (view.defaultView) { 
       option.className = 'defaultViewHighlight'; 
      } 
     };

来源

2013-07-18 08:24:32 Husman

您应该能够跟踪selectedView observable的值并根据它的displayName属性进行测试。如果有可能，我会建议让displayName成为可观察的。

http://jsfiddle.net/p5T8V/

<select id="views" data-bind=" 
    options: viewers(), 
    optionsText: 'displayName', 
    optionsValues: 'id', 
    value: selectedView, 
    style: { color: ($parent.selectedView().displayName == 'not ok') ? 'red' : 'black' } ">

<span data-bind="text: selectedView().displayName" />

把跨度底部将让你看到selectedView（）。显示名的值。您需要在样式中添加$ parent的原因是您将元素绑定到了selectedView。使用类似$（this）.displayName的方法可能会更有效，但我没有时间做一个新项目，提琴只接受一个框架

来源

2013-07-17 15:31:45

你实现你的jsfiddle不工作？ –

如果你看过我的答案，你会意识到，这是因为它使用jQuery和我只有1个框架加载（淘汰赛） –

你可以把任何其他框架外部资源 –

knockout.js应用样式于下拉选项

回答

相关问题