2016-04-14 28 views
0

私は私がtextの計算値を再利用したい、それを計算しないであろうtextcss特性再利用値

<!-- ko foreach: items --> 
<span data-bind="text: $root.calculateText($data), css: { someClass: $root.calculateText($data) == 'someText'} "></span> 
<!-- /ko --> 

ためdata-bindを使用していた(foreachループ内)spanを有しますCSSの2回目。

ノックアウトの能力はありますか?

私が考えていたオプションは、メソッドの中にありますcalculateTextプロパティに追加calculateTextこれをCSSで再利用します。しかし、より効率的なソリューションを見つけることを願っています。

+1

ビューモデルと 'calculateText'コードを含む良いレシピを与える必要があります。この問題については、*多くの方法がありますが、その解決方法はそのコンテキストに依存します。 – Jeroen

答えて

3

ルートのcalculateTextメソッドを使用する計算済みオブザーバブルを作成できます。ルートを使用するには、子オブジェクトの親として渡します。

私はこの実証JsFiddle作成しました:たとえば http://jsfiddle.net/YannickArien/BuH7N/398/

を。

var Item = function(name, parent) { 
    var _self = this; 

    _self.name = ko.observable(name); 
    _self.parent = parent; 
    _self.yourComputed = ko.computed(function() { 
     return _self.parent.calculateText(_self);   
    }, this); 
}; 

var ViewModel = function() { 
    var _self = this; 

    _self.calculateText = function(item) { 
     return item.name(); // Or whatever you want to do here. 
    } 

    _self.items = ko.observableArray([ 
     new Item("one", _self), 
     new Item("two", _self), 
     new Item("three", _self) 
     ]); 
}; 

ko.applyBindings(new ViewModel()); 
あなたが計算された部分を無視して、次のような何かを行うことができ、完全を期すため

が、それは、正確な要件に依存します。次の2行は、以前のバージョンと比較して唯一の変更点です。

_self.yourComputed = _self.parent.calculateText(_self); 

<span data-bind="text: yourComputed, css: { someClass: yourComputed == 'two'} "></span> 
+0

興味深い解決策ですが、妥当性はOPの実際のシナリオに依存します。 (あなたのSO投稿の小さなバグですが、2番目の「yourComputed」を関数として実行する必要があります.jsfiddleに正しいバージョンがあります) – Jeroen

+0

Viktor、これで問題は解決しましたか? – Yan