ノックアウトを使用してビューとバインディングがあり、ドロップダウン メニューに監視可能な配列の値を入力しようとしていますが、html が何らかの方法でそれをオーバーライドし、代わりにデフォルトの文字列を表示しています。
私のHTML
<table id="tblBrands">
<tr data-bind="foreach: agency">
<td>
<table>
<tr>
<td>Advertiser Name
</td>
<td>Account Name
</td>
<td>Responsibility
</td>
<td>Full Name
</td>
</tr>
<tbody data-bind="foreach: brands">
<tr>
<td>
<input data-bind="value: advertiserName" /></td>
<td>
<input data-bind="value: brandName" /></td>
<td>
<!-- <select data-bind="value: responsibility" />-->
<select data-bind="value: responsibility">
<option value="">Select...</option>
<option value="">Media Manager</option>
<option value="">Strategic Responsibility</option>
<option value="">Planning/Buying</option>
</select>
</td>
<td>
<input data-bind="value: fullName" /></td>
<td><a href='#' data-bind='click: $root.removeBrand' style="color: blue">Remove</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
これをドロップダウンメニューにバインドしようとしています:
<select data-bind="value: responsibility">
エージェンシーJS
私の代理店のビューモデルは非常に大きいですが、これがどのように機能するかです:
define(['services/datacontext'], function (dataContext) {
var initialized = false;
var agency;
agency = ko.observableArray([]);
var save = function () {
// Clear Cache because user submitted the form. We don't have to hold onto data anymore.
localStorage.setItem('Agency', null);
localStorage.setItem('Offices', null);
localStorage.setItem('Brands', null);
var agency = ko.toJS(vm.agency._latestValue[0]) //Drill down to _latestValue and convert this to standard JS object
var s = YUI().use("json-stringify", function (Y) {
var jsonAgency = Y.JSON.stringify(agency, [
"activities",
"agencyName",
"agencyID",
"category",
"declaredBillings",
"immediateParent",
"numberOfEmployees",
"ultimateParent",
"uRL",
"offices",
"address1",
"address2",
"address3",
"address4",
"address5",
"agencyID",
"faxNumber",
"officeID",
"postCode",
"telephoneNumber",
"contacts",
"emailAddress",
"firstName",
"jobName",
"personID",
"surName",
"title",
"brands",
"agencyId",
"brandId",
"brandName",
"categoryDescription",
"dateAmended",
"activities",
"additionalInfo",
"advertiserId",
"advertiserName",
"alfRank",
"cinemaRank",
"directMailRank",
"internetRank",
"nielsenId",
"notes",
"numberOfEmployees",
"outdoorRank",
"pressRank",
"radioRank",
"tVRank"
]);
dataContext.saveChanges(jsonAgency, localStorage.setItem('AgencyCurrent', jsonAgency)); // Pass current data from cache and new data from form
})
}
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,
addOffice: addOffice,
removeOffice: removeOffice,
addBrand: addBrand,
removeBrand: removeBrand,
addContact: addContact,
removeContact: removeContact
};
return vm;
function activate() {
vm.agency;
if (initialized) {
return;
}
initialized = false;
refresh();
}
function refresh() {
dataContext.getAgency(agency);
}
function cacheForm(agency) {
var agency = ko.toJS(vm.agency._latestValue[0]) //Drill down to _latestValue and convert this to standard JS object
//Check if the current data has been cached before caching the new data, otherwise just cache the new data.
if (!localStorage.AgencyCurrent) {
var s = YUI().use("json-stringify", function (Y) {
var jsonAgency = Y.JSON.stringify(agency, [
"activities",
"agencyName",
"agencyID",
"campaignBillings",
"category",
"declaredBillings",
"immediateParent",
"numberOfEmployees",
"ultimateParent",
"uRL",
"offices",
"address1",
"address2",
"address3",
"address4",
"address5",
"agencyID",
"faxNumber",
"officeID",
"postCode",
"telephoneNumber",
"contacts",
"emailAddress",
"firstName",
"jobName",
"personID",
"surName",
"title",
"brands",
"agencyId",
"brandId",
"brandName",
"categoryDescription",
"dateAmended",
"activities",
"additionalInfo",
"advertiserId",
"advertiserName",
"alfRank",
"cinemaRank",
"directMailRank",
"internetRank",
"nielsenId",
"notes",
"numberOfEmployees",
"outdoorRank",
"pressRank",
"radioRank",
"tVRank"
]);
localStorage.setItem('AgencyCurrent', null);
localStorage.setItem('AgencyCurrent', jsonAgency);
})
}
var brands = ko.toJS(vm.brands);
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 jsonStrOfficesContacts, jsonStrBrandsAdvertisers;
for (i in agency.offices) { // Outer loop for each office
jsonStrOfficesContacts = Y.JSON.stringify(agency.offices, [
"address1",
"address2",
"address3",
"address4",
"address5",
"agencyID",
"faxNumber",
"officeID",
"postCode",
"telephoneNumber",
"contacts", // From this point on I am drilling into office[n].contacts data
"emailAddress",
"firstName",
"jobName",
"personID",
"surName",
"title"
]);
}
jsonStrBrandsAdvertisers = Y.JSON.stringify(brands, [
"agencyId",
"brandId",
"brandName",
"categoryDescription",
"dateAmended",
"defaultSearchName1",
"defaultSearchName2",
"advertiser", //brands.advertser
"activities",
"additionalInfo",
"advertiserId",
"advertiserName",
"alfRank",
"cinemaRank",
"directMailRank",
"internetRank",
"nielsenId",
"notes",
"numberOfEmployees",
"outdoorRank",
"pressRank",
"radioRank",
"tVRank"
]);
localStorage.setItem('Agency', null);
localStorage.setItem('Offices', null);
localStorage.setItem('Brands', null);
localStorage.setItem('Agency', jsonStrAgency);
localStorage.setItem('Offices', jsonStrOfficesContacts);
localStorage.setItem('Brands', jsonStrBrandsAdvertisers);
});
//var objBrands = new Object(ko.mapping.fromJSON(localStorage.getItem('Brands')));
// for (i in objBrands._latestValue) {
// for (a in objBrands._latestValue[i]) {
// if (a == "advertiser") {
// objAdvertiser = objBrands._latestValue[i].advertiser; // get advertiser data
// objBrands.unshift(objBrands._latestValue[i].advertiser) // unshift it from root
// // create temp objects
// var tempBrands = ko.toJS(objBrands);
// var tempAdvertiser = ko.toJS(objAdvertiser);
// brands[i].advertiser = tempAdvertiser;
// }
// }
// }
}
function addOffice() {
//Convert agency observable to object
var objAgency = ko.toJS(vm.agency);
var objOffice = {
address1: " ",
address2: " ",
address3: " ",
address4: " ",
address5: " ",
agencyID: " ",
contacts: [],
faxNumber: " ",
officeID: " ",
postCode: " ",
telephoneNumber: " ",
}
objAgency[0].offices.unshift(objOffice); // Add new object to agency
vm.agency([ko.mapping.fromJS(objAgency[0])]); //Bind back to KO
}
function removeOffice(office) {
var ID = office.officeID._latestValue;
agency._latestValue[0].offices.remove(office);
}
function addContact(office) { // Passing in object array of agency. We no it contains correct office and agency ID
// Assign observable data to new variable then remove old
// variable from mapping
var objAgency = ko.toJS(agency);
var officeTableNum;
//vm.agency.removeAll();
var agencyID = office.agencyID._latestValue;
var officeID = office.officeID._latestValue
// Fill new object with empty strings and related data
var objContact = {
agencyID: agencyID,
emailAddress: "",
firstName: "",
jobName: "",
office: "",
OfficeID: officeID,
personID: "",
surName: "",
title: "",
responsibilities: "",
notes: ""
}
// Splice where office ID match
for (i in objAgency[0].offices) {
if (!isNaN(i)) {
if (objAgency[0].offices[i].officeID === officeID) {
// set var for tracking office i.e. office 1, 2, 3
officeTableNum = i + 1; // Because of 0 index, add 1
objAgency[0].offices[i].contacts.unshift(objContact); // At i remove one object
}
else {
}
}
}
vm.agency([ko.mapping.fromJS(objAgency[0])]);
}
function removeContact(contact) {
for (i in agency._latestValue[0].offices._latestValue) {
if (isNaN(i)) { // Escape if NaN, otherwise use index valI ha
}
else {
for (ii in agency._latestValue[0].offices._latestValue[i].contacts._latestValue) {
agency._latestValue[0].offices._latestValue[i].contacts.remove(contact);
}
}
}
}
function addBrand() {
//Convert agency observable to object
var objAgency = ko.toJS(vm.agency);
var objBrand = {
brandName: " ",
advertiserName: " ",
aLFRank: " ",
totalRank: " ",
cinemaRank: " ",
directMailRank: " ",
internetRank: " ",
outdoorRank: " ",
pressRank: " ",
radioRank: " ",
tVRank: " ",
}
objAgency[0].brands.unshift(objBrand); // Add new object to agency
vm.agency([ko.mapping.fromJS(objAgency[0])]); //Bind back to KO
}
function removeBrand(brand) {
var ID = brand.brandID._latestValue;
agency._latestValue[0].brands.remove(brand);
}
});
概要
観察可能な配列データをドロップダウン メニューにバインドしたいが、ドロップダウン アイテムも利用できるようにしたい。
編集
新しい VM
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,
addOffice: addOffice,
removeOffice: removeOffice,
addBrand: addBrand,
removeBrand: removeBrand,
addContact: addContact,
removeContact: removeContact,
responsibilityOptions: ['France', 'Germany', 'Spain']
};
return vm;
新しいバインディング
<select data-bind="options: $root.responsibilityOptions, value: responsibility"></select>
