Question

我在html中有元素，它有css的数据绑定。背后的领域是ko.computed。

在计算函数中，我需要访问元素的id。

如何在ko.computed函数中获取元素？

代码示例：

    <span id="ship" style="cursor:pointer" data-bind="click:changeItem, css:computeActive" >ship</span>
    <span id="cat" style="cursor:pointer" data-bind="click:changeItam, css:computeActive" >cat</span>
    <span id="dog" style="cursor:pointer" data-bind="click:changeItem, css:computeActive" >dog</span>

查看模型：

 var vm = {
        computeActive: function () {
            return data.selectedItem()== (****here is the place where I want to use object id****)?
                 "activeText":"inActiveText" ;
        },           
        changeItem:  function (event, sender) {                
                data.selectedItem(sender.currentTarget.id);              
        }           
    };

我不想要：

1。使用knockout.bindingHandler

2。为每个元素编写分离的计算函数

Answer 1

在计算函数中，我需要访问元素的id。

不，你不是。

您的视图模型永远不需要了解您的视图。（换句话说，如果确实如此，那你就做错了。）

更好的视图模型（感谢@xdumaine协助）：

function VM() {
    var self = this;

    self.items = ko.observableArray(['ship', 'cat', 'dog']);
    self.selectedItem = ko.observable();

    self.computeActive = function (item) {
        return self.selectedItem() === item ? "activeText" : "inActiveText";
    };
    self.selectItem = function (item) {
        self.selectedItem(item);
    }           
};

ko.applyBindings(new VM());

和视图

<div data-bind="foreach: items">
  <span data-bind="click: $root.selectItem, css: $root.computeActive($data), text: $data"></span>
</div>

查看实际操作：http://jsfiddle.net/6998N/5/

在这种情况下，传递$data（即项目本身）就像这个css: $root.computeActive($data)一样是必要的，因为它迫使KnockOut每次都为每个项目重新评估css绑定。

有关替代方法，请参阅http://jsfiddle.net/6998N/4/。

Answer 2

如果您不想制作自定义绑定处理程序，则可以手动传递ID。

var vm = {
    computeActive: function (id) {
         return data.selectedItem()== id?"activeText":"inActiveText" ;
    },           
    changeItem:  function (event, sender) {                

    }           
};

HTML： -

 <span id="ship" style="cursor:pointer" data-bind="click:changeItem, css:computeActive('ship')" >ship</span>
 <span id="cat" style="cursor:pointer" data-bind="click:changeItem, css:computeActive('cat')" >cat</span>
 <span id="dog" style="cursor:pointer" data-bind="click:changeItem, css:computeActive(dog')" >dog</span>

Sample Fiddle

knockout.computed - 访问元素属性

2 个答案: