Knockout自定义绑定更新未触发

Question

以下代码中，每当viewModel.item可观察对象更新时，我期望我的update函数执行。我可以看到在页面加载时，我的init和update函数按预期触发，但是当单击按钮更新可观察对象的值时，它们并没有执行。

标记：

<button id='addButton'>item++</button>
<br/>
<span>viewModel.item = </span>
<span data-bind='text: $data.item(), bind: viewModel.item'></span>

脚本：

$(document).ready(function() {
    $('#addButton').click(function() {
        viewModel.item(viewModel.item() + 1);
    });    
    var viewModel = {
        item: ko.observable(1)
    };        
    ko.bindingHandlers.bind = {
        init: function(element, valueAccessor) {
            alert('init');
        },
        update: function(element, valueAccessor) {
            alert('update');
        }  
    };        
    ko.applyBindings(viewModel);
}); 

我已经浏览了一些类似的问题，但没有找到一个可比的例子。我已经在这里创建了一个JSFiddle 链接。

- Citrus

---

预期的行为是什么？每次点击按钮都会弹出一个显示“更新”的警告框吗？ - Robert Krzyzanowski

完全正确。 - Citrus

Answer 1

当绑定处理程序（binding handler）访问的可观察对象（observables）被更新时，其update函数将运行。你的函数没有访问任何可观察对象。

这是一个可用的更新版本：

ko.bindingHandlers.bind = {
    init: function(element, valueAccessor) {
        alert('init');
    },
    update: function(element, valueAccessor) {
        ko.unwrap(valueAccessor());
        alert('update');
    } 
};        

http://jsfiddle.net/vMD74/14/

- Michael Best

---

为什么调用 valueAccessor() 不能解决问题，但是 ko.unwrap(valueAccessor()) 可以呢？ - it3xl

我明白了。valueAccessor()() 就是有效的。好的，ko.unwrap(valueAccessor()) 是唯一可扩展的解决方案。 - it3xl

valueAccessor()函数返回绑定设置的值（它是一个计算属性，包裹了绑定表达式），但实际上并没有访问observable，因此不会创建依赖关系。valueAccessor()()获取绑定的值并访问observable，从而创建依赖关系。ko.unwrap()函数返回取消引用的observable或者如果unwrap()参数是普通对象，则直接返回该字面量对象本身。 - Chris Knoll