javascript - Knockout custom binding update not firing - Stack Overflow

admin管理员组

文章数量:1188829

With the following code, I would expect my update function to execute every time the viewModel.item observable is updated. I can see my init and update functions firing on page load as expected, but not when my button is clicked which updates the observable's value.

Markup:

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

Script:

$(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);
}); 

I've browsed some of the similar questions and haven't found a comparable example. I've created a JSFiddle here.

With the following code, I would expect my update function to execute every time the viewModel.item observable is updated. I can see my init and update functions firing on page load as expected, but not when my button is clicked which updates the observable's value.

Markup:

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

Script:

$(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);
}); 

I've browsed some of the similar questions and haven't found a comparable example. I've created a JSFiddle here.

• javascript
• jquery
• knockout.js
• custom-binding

Share Improve this question Follow edited May 26, 2014 at 23:36 Citrus asked May 26, 2014 at 22:56 CitrusCitrus 76622 gold badges1313 silver badges2727 bronze badges 2

• What is the expected behavior? An alert that says update on every click of the button? – Robert Krzyzanowski Commented May 26, 2014 at 23:06
• That's exactly right. – Citrus Commented May 26, 2014 at 23:11

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 32

The update function of a binding handler will run whenever the observables it accesses are updated. Your function doesn't access any observables.

Here is an updated version that will work:

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

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

本文标签： javascriptKnockout custom binding update not firingStack Overflow