更新

Question

我有一个页面，我正在使用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数组中只有两个项目，但是对每个项目（文本，DOM对象，注释和另一个文本）调用afterAdd（）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/

Answer 1

foreach绑定的afterRender事件将允许您访问生成的dom。

afterRender - 每次复制foreach块时都会调用   插入到文档中，当foreach首次初始化时，和   何时将新条目添加到关联的数组中。昏死   将为您的回调提供以下参数：


插入的DOM元素数组

绑定它们的数据项

我希望它有所帮助。

Answer 2

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

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

Answer 3

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

Knockout.js - 使用模板时，如何知道给定模型绑定的dom元素？

更新

另一次更新

3 个答案: