Question

我有span（在foreach圈内）我正在使用data-bind text和css属性

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

我想重用text的计算值，而不是第二次为css计算。

是否有任何击倒能力？

我想到的一个选项是在方法calculateText内添加到项属性calculateText并在css中重用它。但希望找到更有效的解决方案。

Answer 1

您可以创建一个计算的observable，它使用根其calculateText方法。您可以通过将其作为子对象的父级传递来使用root。

我创建了一个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());

为了完整起见，您可以忽略计算部分并执行以下操作，但这取决于具体要求。与以前的版本相比，以下两行是唯一的变化。

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

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

在knockoutjs data-bind

1 个答案: