KnockoutJS multiple data-bindings - value and javascript function

Question

I want to have multiple data-bindings on my view so my text box contains the right value and when the value changes it calls a function. Basically I want to use amplify.js local storage every time a value on my form changes.

Agency view

<section class="view">
    <header>
        <button class="btn btn-info btn-force-refresh pull-right"
            data-bind="click: refresh">
            <i class="icon-refresh"></i>Refresh</button>

               <button class="btn btn-info"
            data-bind="click: save">
            <i class="icon-save"></i>Save</button>

        <h3 class="page-title" data-bind="text: title"></h3>
        <div class="article-counter">
            <address data-bind="text: agency().length"></address>
            <address>found</address>
        </div>
    </header>

    <table>
        <thead>
            <tr>
                <th>Agency Name</th>
                <th>Category</th>
                <th>URL</th>
                <th>Number of employees</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: agency">
            <tr>
                <td>
                    <!--<input data-bind="value: agencyName" /></td>-->
                  <input data-bind="value: agencyName, onchange: test()"/>
                <td>
                    <input data-bind="value: category" /></td>
                <td>
                    <input data-bind="value: Url" /></td>
                <td>
                    <input data-bind="value:numberOfEmployees" /></td>
            </tr>
            <tr>
                <td>Activities</td>
                <td>Declared Billings</td>
                <td>Campaigned Billings</td>
            </tr>
            <tr>
                <td>
                    <input data-bind="value: activities" /></td>
                <td>
                    <input data-bind="value: declaredBillings" /></td>
                <td>
                    <input data-bind="value: campaignBillings" /></td>
            </tr>
        </tbody>
    </table>
</section>

Agency ViewModel

define(['services/datacontext'], function (dataContext) {

    //var myStoredValue = amplify.store("Agency"),
    // myStoredValue2 = amplify.store("storeExample2"),
    // myStoredValues = amplify.store();

    var agency = ko.observableArray([]);
    var initialized = false;

    var save = function (agency) {
        return dataContext.saveChanges(agency);
    };

    var vm = { // This is my view model, my functions are bound to it. 
        //These are wired up to my agency view
        activate: activate,
        agency: agency,
        title: 'agency',
        refresh: refresh, // call refresh function which calls get Agencies
        save: save

    };
    return vm;

    function activate() {
        if (initialized) {
            return;
        }

        initialized = true;

        return refresh();

    }

    function refresh() {
        return dataContext.getAgency(agency);   
    }

    function test() {
        alert("test");
    }
});

Every time I type a new value, for example

  <input data-bind="value: agencyName, onchange: test()"/>

I want to fire the function test. I then want to store the view model latest data into local storage.

Does anyone know how to do multiple bindings for this?

Answer 1

You should use this binding:

<input data-bind="value: agencyName, event: { change: $parent.onAgencyNameChanged}"/>

Note that I used $parent to refer to the vm Object.

And add an handler to your viewModel.

var vm = {  
    ....
    onAgencyNameChanged: function(agency){
       // do stuff
   }
};    
return vm;

Another solution could be to subscribe on the agencyName of all agencies. But I think this isn't suited to this case. After creating the vm you could do this :

ko.utils.arrayForEach(vm.agency(), function(a){
    a.agencyName.subscribe(function(){
    // do stuff
    });
});

I hope it helps.

Answer 2

Try to subscribe your object manually for each element that you have to bind.

Have a look at the explanation and the example in the knockout documentation here.