javascript - KnockoutJS - 如何在第一次渲染后通知 foreach 中的更新项目？

Question

我正在尝试创建自定义 foreach 绑定(bind)，但无法正确拦截更新事件。此自定义绑定(bind)称为“测试”。

这是标记

<ul data-bind='test: collection'>
    <li>
        <button data-bind='text: caption, click: $parent.callback'></button>
    </li>
</ul>

这是虚拟机示例

function VM() {
    var self = this;
    self.collection = ko.observableArray([]);
    self.collection.push({id: 1, caption: 'test1', active: true});
    self.collection.push({id: 2, caption: 'test2', active: false});
    self.collection.push({id: 3, caption: 'test3', active: false});

    self.callback = function(data) {
        data.active = true;
    }
}

这是自定义绑定(bind)

ko.bindingHandlers.test = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
      return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindings, viewModel, bindingContext);
    },

    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
      var value = ko.utils.unwrapObservable(valueAccessor());
      //console.log(element);

      var newValue = function(){
        return {
          data: value,
          afterRender: function(element, index, data) {
              if (index.active) {
                  $(element).css('color', 'green');
              }
          }
        }
      }

      ko.bindingHandlers.foreach.update(element, newValue, allBindings, viewModel, bindingContext);
    }
};

我想在项目的事件标志变为 TRUE 时更改项目颜色，但更新回调仅在 init 步骤期间调用。如何实现这一目标？

Fiddle

Answer 1

你的 fiddle 有一些问题 -

1. newValue 是一个函数，但在初始加载后永远不会被调用或计算。

2. 当 observable 的属性发生更改时，observableArray 中的 observable 不会通知 observableArray。

3. 在元素的属性定义中使用 ' 不兼容跨浏览器(看看您的 IE)

4. 您的 fiddle 中的 Active 不是可观察的，并且当它的值发生变化时永远不会通知任何人。

此外，一般来说，您会在这里混合关注点 - 使用 CSS 来应用样式，使用 View 模型来控制 View 逻辑，并使用数据绑定(bind)来更新元素。

http://jsfiddle.net/LgA3b/4/

注意CSS

.active {
    color: green;
}