Question

I’ve got 2 fields in my model that have a master/slave type relationship.

If the master updates the slave should take the update too.

If the slave updates the master is unaffected.

I’ve managed to implement this with a manual subscription – http://jsfiddle.net/ProggerPete/XNUPj/

But I’m wondering if I could achieve the same result without the manual binding. The reason I’m wanting it is I’d prefer not to have to unbind my manual subscriptions when i’m destroying my view.

Cheers,
Peter

Answer 1

Generally, I would say that the manual subscription is the most straightforward approach to your question.

However, it is pretty easy to create your own custom observable that encapsulates this functionality and handles updating both the master and slave in a writeable dependentObservable. It might look something like this:

function customObservable(initialValue) {
    var _source = ko.observable(initialValue),
        _local = ko.observable(initialValue),
        result = ko.dependentObservable({
            read: _source,
            write: function(newValue) {
               _source(newValue);
               _local(newValue); 
            }
        });

    result.local = _local;

    return result;
}

and you would use it like:

var viewModel = {
    source: customObservable("sourceValue")
};

The customObservable (call it whatever you want) returns a writeable dependentObservable that will update both values that you can bind against as source. The local value is also exposed as source.local.

So, you would use this in your scenario like: http://jsfiddle.net/rniemeyer/67pDS/

I am not sure how you want to use this functionality though. If you are looking for the ability to accept/cancel edits to an observable, then you might want to look at this custom observable.

Snippet to show disposal in custom binding:

        var subscription = oComboBoxModel.value.subscribe(updateBestMatchFromValue, oComboBoxModel);

        //handle disposal (if ko.cleanNode is called on the element)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function(){
              subscription.dispose();
        });