私はエージェンシーとビューモデルと呼ばれるビューを持っています。ビューモデルには、データが含まれるエージェンシーとも呼ばれるプロパティがあります。このデータには子もありますが、私の見解では、子の場合は関数が起動しません。
<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);
});
}
});
私の質問が意味をなさない場合、私はそれをよりよく説明しようとすることができます. 私はノックアウトを使用するのが初めてなので、それを最もよく説明する方法がわかりません。