Knockout.js 在knockoutjs数据绑定中重用值

我有一个

span

（在

foreach

循环中），我在其中为

文本和
css
属性使用
数据绑定

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



我希望重用
文本的计算值，而不是第二次计算css的值

有没有击倒它的能力

我考虑的一个选项是在方法
calculateText
中添加到item属性
calculateText
并在css中重用它。但是希望找到更有效的解决方案。
您可以创建一个使用根函数及其calculateText方法的计算可观察对象。通过将根作为子对象的父对象传递，可以使用根

我创建了一个JSFIDLE，它演示了以下内容：

比如,

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());

为了完整性，您可以忽略计算部分并执行如下操作，但这取决于确切的需求。与上一版本相比，以下两行是唯一的更改

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

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

\u self.yourComputed=\u self.parent.calculateText（\u self）；
您可以创建一个使用根函数及其calculateText方法的computed observable。通过将根作为子对象的父对象传递，可以使用根

我创建了一个JSFIDLE，它演示了以下内容：

比如,

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());

为了完整性，您可以忽略计算部分并执行如下操作，但这取决于确切的需求。与上一版本相比，以下两行是唯一的更改

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

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

\u self.yourComputed=\u self.parent.calculateText（\u self）；
您需要给我们一个很好的复制，包括视图模型和
calculateText
代码。有很多方法可以解决这个问题，解决方案取决于上下文。您需要给我们一个很好的介绍，包括视图模型和
calculateText
代码。解决这个问题有很多方法，解决方案取决于上下文。有趣的解决方案，尽管适当性取决于OP的实际场景。（虽然你的SO帖子中有一个小错误，但是第二个
yourComputed
应该作为一个函数执行。JSFIDLE有正确的版本。）有趣的解决方案，尽管适当性取决于OP的实际场景。（尽管您的SO帖子中有一个小错误，但第二个
yourComputed
应该作为函数执行。JSFIDLE有正确的版本。）