如何从视图调用我的 viewmodel 函数 - viewmodel 的子级（knockout.js）

Question

I have a view called agency and a viewmodel. The viewmodel has a property also called agency where the data is contained. This data also has children but on my view my function doesn't fire when it is a child.

<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>Submit data</button>
        <br />
        <br />

        <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, event: { change: $parent.cacheForm }" />
                <td>
                    <input data-bind="value: category, event: { change: $parent.cacheForm }" /></td>
                <td>
                    <input data-bind="value: uRL, event: { change: $parent.cacheForm }" /></td>
                <td>
                    <input data-bind="value: numberOfEmployees, event: { change: $parent.cacheForm }" /></td>
            </tr>
            <tr>
                <td>Activities</td>
                <td>Declared Billings</td>
                <td>Campaigned Billings</td>
            </tr>
            <tr>
                <td>
                    <input data-bind="value: activities, event: { change: $parent.cacheForm }" /></td>
                <td>
                    <input data-bind="value: declaredBillings, event: { change: $parent.cacheForm }" /></td>
                <td>
                    <input data-bind="value: campaignBillings, event: { change: $parent.cacheForm }" /></td>
            </tr>
        </tbody>
    </table>

    <div class="article-counter">
        <div data-bind="foreach: agency">
            <address data-bind="text: offices().length"></address>
            <address>found</address>
        </div>
    </div>
    <div data-bind="foreach: agency">
        <div data-bind="foreach: offices">
            <table>
                <tr>
                    <td>
                        <h1>Offices</h1>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <table>
                                <tr>
                                    <td>Address1</td>
                                    <td>Address2</td>
                                    <td>Address3</td>
                                    <td>Address4</td>
                                </tr>
                                <tr>
                                    <td>
                                        <input data-bind="value: address1, event: { change: $parent.cacheForm }" />
                                    </td>

                                    <td>
                                        <input data-bind="value: address2, event: { change: $parent.cacheForm }" />
                                    </td>

                                    <td>
                                        <input data-bind="value: address3, event: { change: $parent.cacheForm }" />
                                    </td>

                                    <td>
                                        <input data-bind="value: address4, event: { change: $parent.cacheForm }" />
                                    </td>
                                </tr>

                                <tr>
                                    <td>Address5</td>
                                    <td>faxNumber</td>
                                    <td>postCode</td>
                                    <td>telephoneNumber</td>
                                </tr>
                                <tr>
                                    <td>
                                        <input data-bind="value: address5, event: { change: $parent.cacheForm }" />
                                    </td>
                                    <td>
                                        <input data-bind="value: faxNumber, event: { change: $parent.cacheForm }" />
                                    </td>
                                    <td>
                                        <input data-bind="value: postCode, event: { change: $parent.cacheForm }" />
                                    </td>
                                    <td>
                                        <input data-bind="value: telephoneNumber, event: { change: $parent.cacheForm }" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="article-counter">
                            <address data-bind="text: contacts().length"></address>
                            <address>found</address>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div data-bind="foreach: contacts">
                            <table>
                                <tr>
                                    <td>Title</td>
                                    <td>First Name</td>
                                    <td>Surname</td>
                                </tr>
                                <tr>
                                    <td>
                                        <input data-bind="value: title, event: { change: $parent.cacheForm }" />
                                    </td>
                                    <td>
                                        <input data-bind="value: firstName, event: { change: $parent.cacheForm }" />
                                    </td>
                                    <td>
                                        <input data-bind="value: surName, event: { change: $parent.cacheForm }" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</section>

When I change these values for example my function fires, it is the parent.

<tbody data-bind="foreach: agency">
                <tr>
                    <td>
                        <!--<input data-bind="value: agencyName" /></td>-->
                        <input data-bind="value: agencyName, event: { change: $parent.cacheForm }" />
                    <td>
                        <input data-bind="value: category, event: { change: $parent.cacheForm }" /></td>
                    <td>
                        <input data-bind="value: uRL, event: { change: $parent.cacheForm }" /></td>
                    <td>
                        <input data-bind="value: numberOfEmployees, event: { change: $parent.cacheForm }" /></td>
                </tr>

When I loop inside each agency and then each office like this:

<div data-bind="foreach: agency">
        <div data-bind="foreach: offices">
            <table>
                <tr>
                    <td>
                        <h1>Offices</h1>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <table>
                                <tr>
                                    <td>Address1</td>
                                    <td>Address2</td>
                                    <td>Address3</td>
                                    <td>Address4</td>
                                </tr>
                                <tr>
                                    <td>
                                        <input data-bind="value: address1, event: { change: $parent.cacheForm }" />
                                    </td>

                                    <td>
                                        <input data-bind="value: address2, event: { change: $parent.cacheForm }" />
                                    </td>

                                    <td>
                                        <input data-bind="value: address3, event: { change: $parent.cacheForm }" />
                                    </td>

                                    <td>
                                        <input data-bind="value: address4, event: { change: $parent.cacheForm }" />
                                    </td>
                                </tr>

This function won't fire

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

I don't know the correct syntax to fire this function from agency.office.

This is my entire viewmodel

define(['services/datacontext'], function (dataContext) {
    var initialized = false;
    var agency;

    if (localStorage.Agency && localStorage.Offices && localStorage.Contacts) {
        var objAgency = new Object(ko.mapping.fromJSON(localStorage.getItem('Agency')));
        var objOffices = new Object(ko.mapping.fromJSON(localStorage.getItem('Offices')));
        var objContacts = new Object(ko.mapping.fromJSON(localStorage.getItem('Contacts')));

        objAgency.offices = objOffices;
        objAgency.offices._latestValue[0].contacts = objContacts;


        agency = ko.observableArray([ko.mapping.fromJS(objAgency)]);
        ko.applyBindings(agency);

        initialized = true;

    }
    else {
        agency = ko.observableArray([]);
    }


    var save = function (agency, myStoredValue) {
        // Clear Cache because user submitted the form. We don't have to hold onto data anymore.
        //amplify.store("Agency", null);
        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,
        cacheForm: cacheForm
    };
    return vm;

    function activate() {

        vm.agency;

        if (initialized) {
            return;
        }

        initialized = false;

        return refresh();

    }

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


    function cacheForm(agency) {
        // GET my object from agency vm
        var agency = ko.toJS(agency);

        var s = YUI().use("json-stringify", function (Y) {

            var jsonStrAgency = Y.JSON.stringify(agency, ["activities", "agencyName", "agencyID", "campaignBillings", "category", "declaredBillings", "immediateParent", "numberOfEmployees", "ultimateParent", "uRL"]); // Use an array of acceptable object key names as a whitelist.
            var jsonStrOffices, jsonStrContacts;

            for (i in agency.offices) {
                jsonStrOffices = Y.JSON.stringify(agency.offices, ["address1", "address2", "address3", "address4", "address5", "agencyID", "faxNumber", "officeID", "postCode", "telephoneNumber"]);

                for (ii in agency.offices[i].contacts) {
                    jsonStrContacts = Y.JSON.stringify(agency.offices[i].contacts, ["agencyID", "emailAddress", "firstName", "jobName", "officeID", "personID", "surName", "title"]);
                }
            }

            localStorage.setItem('Agency', jsonStrAgency);
            localStorage.setItem('Offices', jsonStrOffices);
            localStorage.setItem('Contacts', jsonStrContacts);
        });
    }
});

If my question doesn't make sense I can try to explain it better. I am new to using knockout so I don't know how to best explain it.

Answer 1

If you want to go all the way up to your root view model, then you can use $root instead of $parent . If you want to walk up the scopes, then you can use the $parents array.

If I understand your structure it looks like either $root.cacheForm or $parents[1].cacheForm would work. Note that the item passed would be the "office".

You can alternatively handle something like this purely on the view model side by using a computed observable to grab dependencies on all of the things that you care about. Something like this: http://www.knockmeout.net/2011/05/creating-smart-dirty-flag-in-knockoutjs.html