Javascript knockout.computed-访问元素属性

我有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>

我不想要：

1。要使用knockout.bindingHandler

---

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>

船
猫
狗

---

如果不想创建自定义绑定处理程序，则可以手动传递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>

船
猫
狗

在computed函数中，我需要访问元素的id

不，你没有

您的视图模型永远不需要了解有关视图的任何信息。（换句话说，如果是这样，你就做错了。）

更好的视图模型（感谢@xdumain）：

那景色呢

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

在行动中看到它：

在这种情况下，像下面这样传递

$data

（即项目本身）

css:$root.computeActive（$data）

，是必要的，因为它强制敲除每次分别重新评估每个项目的

css

绑定

有关替代方法，请参阅

在computed函数中，我需要访问元素的id

不，你没有

您的视图模型永远不需要了解有关视图的任何信息。（换句话说，如果是这样，你就做错了。）

更好的视图模型（感谢@xdumain）：

那景色呢

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

在行动中看到它：

在这种情况下，像下面这样传递

$data

（即项目本身）

css:$root.computeActive（$data）

，是必要的，因为它强制敲除每次分别重新评估每个项目的

css

绑定

---

请参阅以获取替代方法。

您可以发布一些代码吗？为什么您的计算模型中需要元素id？这通常是一种反模式，您需要在viewmodel中包含这样的信息，因此可能有一种更为出色的方法来实现这一点……我添加了一个示例，但没有正确解释为什么您不想要某些东西，它与您不想要的东西并不相关。；-）你能发一些代码吗？为什么您的计算模型中需要元素id？这通常是一种反模式，您需要在viewmodel中包含这样的信息，因此可能有一种更为出色的方法来实现这一点……我添加了一个示例，但没有正确解释为什么您不想要某些东西，它与您不想要的东西并不相关。；-）由于

computeActive

是一个函数，您需要传递以下项：

css:$root.computeActive（$data）

@xdumaineknockout会自动完成这一功能。在不使用它的情况下尝试它-它将css的值绑定到整个函数。你必须通过考试。@xdumain当然通过了。查看您修改的fiddle:-它会在单击时提醒正确的数据。我的错误是，它不是$root或$parent对象，但是css绑定不能像您所拥有的那样工作。它甚至在您发布的内容中也不起作用。因为

computeActive

是一个函数，所以您需要传递以下项：

css:$root.computeActive（$data）

@xdumaineknockout会自动完成这一功能。在不使用它的情况下尝试它-它将css的值绑定到整个函数。你必须通过考试。@xdumain当然通过了。查看您修改的fiddle:-它会在单击时提醒正确的数据。我的错误是，它不是$root或$parent对象，但是css绑定不能像您所拥有的那样工作。它甚至在你发布的那篇文章中也不起作用。