Question

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

这是标记

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

这是VM示例

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;
    }
}

这是自定义绑定

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

你的小提琴中有一些问题 -

newValue是一个函数，但在初始加载后永远不会被调用或计算。
当observable上的属性发生更改时，observableArray中的observable不会通知observableArray。
使用'元素内部的属性定义不是跨浏览器兼容的（看着你的IE）
在你的小提琴中活跃不是一个可观察的，并且在价值发生变化时永远不会通知任何人。

此外，一般情况下，您在这里混合关注点 - 使用CSS来应用样式，使用视图模型来控制视图逻辑，并使用数据绑定来更新元素。

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

注意CSS

.active {
    color: green;
}

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

1 个答案: