我有一个名为agency和viewmodel的视图。 viewmodel有一个属性，也称为代理，其中包含数据。这个数据也有孩子，但在我看来，我的功能在孩子时不会被触发。
<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>
当我更改这些值时，例如我的函数会触发，它就是父级。
<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>
当我在每个机构内部循环，然后每个办公室都这样：
<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>
此功能无法启动
<input data-bind="value: address1, event: { change: $parent.cacheForm }" />
我不知道从agency.office激发此功能的正确语法。
这是我的整个视图模型
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);
});
}
});
如果我的问题没有意义，我可以尝试更好地解释它。我不熟悉使用淘汰赛，所以我不知道如何最好地解释它。
答案 0 :(得分：1)
如果您希望一直使用根视图模型，则可以使用$root代替$parent。如果要向上移动范围，则可以使用$parents数组。
如果我了解您的结构，则$root.cacheForm或$parents[1].cacheForm可能会起作用。请注意，传递的项目将是“办公室”。
您也可以通过使用计算的observable来获取您关注的所有内容的依赖关系，从而纯粹在视图模型方面处理类似这样的事情。这样的事情：http://www.knockmeout.net/2011/05/creating-smart-dirty-flag-in-knockoutjs.html