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應用樣式於下拉選項

回答

相關問題