knockout.computed - 访问元素属性答案

【问题标题】：knockout.computed - access to element attributeknockout.computed - 访问元素属性
【发布时间】：2014-07-09 00:01:50
【问题描述】：

我在 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。为每个元素编写分离的计算函数

【问题讨论】：

你能发布一些代码吗？为什么在计算中需要元素 id？这通常是一种反模式，您需要在视图模型中使用此类信息，因此可能有一种更淘汰的方式来执行此操作...
我已经添加了一个例子
如果没有正确的解释为什么你不想要某些东西它与你不想要的东西并不真正相关。 ;-)

标签： javascript knockout.js

【解决方案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/

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

请参阅http://jsfiddle.net/6998N/4/ 了解替代方法。

【讨论】：

由于computeActive 是一个函数，您需要传递项目：css: $root.computeActive($data)。 Fiddle
@xdumaine Knockout 会自动执行此操作。
在小提琴中尝试不使用它 - jsfiddle.net/6998N/2 它将 css 的值绑定到整个函数。你必须通过它。
@xdumaine 当然可以。查看修改后的小提琴：jsfiddle.net/6998N/3 - 它会在点击时提醒正确的数据。
我的错误，这不是 $root 或 $parent 的事情，但 css 绑定不能像你拥有的那样工作。它甚至在您发布的那个中也不起作用。

【解决方案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

【讨论】：