2

我有一个页面，我正在使用 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());
    }
};

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

另一个更新

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

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/

4

3 回答 3

0

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

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

于 2013-05-21T16:44:04.957 回答
0

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

于 2013-05-21T16:56:34.907 回答
0

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

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

  • 插入的 DOM 元素的数组
  • 绑定它们的数据项

我希望它有所帮助。

于 2013-05-21T16:43:43.837 回答