【问题标题】：Knockout.js - When using templates, how do I know to which dom element a given model is bound?Knockout.js - 使用模板时，我如何知道给定模型绑定到哪个 dom 元素？
【发布时间】：2013-05-21 16:35:21
【问题描述】：

我有一个页面，我正在使用 foreach 重复大部分内容：

<div class="module-wrapper" 
  data-bind="template: { name: 'dependent-template', foreach: dependentInformation }">    
</div>

我正在这些部分中设置逻辑，并且需要在模型值更改时运行一些 jquery (addClass())。但我不知道如何处理当前模型的绑定 DOM 元素。

有人知道吗？

更新

在阅读 afterRender 时，我看到了我现在正在使用的 afterAdd：

<div class="module-wrapper" 
       data-bind="template: { 
         name: 'dependent-template', 
         foreach: dependentInformation, 
         afterAdd: setClassFromModelState }">
</div>

这并不像我希望的那样干净，因为尽管我的dependentInformation 数组中只有两个项目，但 afterAdd() 对每个项目（文本、DOM 对象、注释和另一个文本）调用了 4 次)。

因此，我必须检查元素以了解何时实际执行我想要的操作：

self.setClassFromModelState = function(element, index, data){
    if ($(element).hasClass("cat") && $(element).hasClass("form-group")) {
        $(element)
            .removeClass("off")
            .removeClass("summary")
            .removeClass("edit")
            .addClass(data.model_state());
    }
};

宁愿有一个更清洁的方法来做到这一点......但这正在工作......

另一个更新

只需阅读here，我应该检查节点类型以执行我想要的操作：

self.setClassFromModelState = function(element, index, data){
   if (element.nodeType === 1) {
        $(element)
           .removeClass("off")
           .removeClass("summary")
           .removeClass("edit")
           .addClass(data.model_state());
   }
};

http://jsfiddle.net/rniemeyer/awCRM/2/

【问题讨论】：

标签： knockout.js knockout-2.0

【解决方案1】：

foreach 绑定的afterRender 事件将使您能够访问生成的 dom。

afterRender — 每次复制 foreach 块时调用，并且插入到文档中，无论是在 foreach 首次初始化时，还是稍后将新条目添加到关联数组时。昏死将为您的回调提供以下参数：

插入的 DOM 元素的数组

绑定它们的数据项

希望对你有帮助。

【讨论】：

【解决方案2】：

保持 MVVM 干净并直接使用 DOM（=视图）的最佳方法是使用 knockout.js 的 custom bindings 功能

【讨论】：

我喜欢这个想法，但这样做意味着我必须重新实现模板绑定函数以接受我的新属性...

【解决方案3】：

在 MVVM 模式中，ViewModel 不应该在技术上直接与 View 交互，因此 Knockout 并没有真正为您提供一种干净的方式来访问任何特定属性所绑定到的 DOM 元素。（见 Knockout 对 MVVM 的描述here。）

我的建议是使用敲除提供的css 绑定来切换类，或者如果这对您不起作用，您可能需要实现自定义binding handler 来处理相互作用。

【讨论】：