Перекрестная привязка данных между классами
Цель: дать пользователю возможность корректировать результаты картирования.
Я сталкиваюсь с проблемой, когда мне нужно изменить экземпляр, используемый для элемента с привязкой к данным. Отказ от ответственности: моя структура данных JSON может быть отключена, и я открыт для возможных изменений. Я кодирую приложение для отображения заголовков таблиц, чтобы пользователь мог проверить правильность заголовков, отображаемых сервером. У пользователя будет возможность отобразить заголовки, если возникнет проблема. Я не смог выяснить, как на самом деле обновить данные, привязанные к результату, когда изменяется меню выбора. Такое ощущение, что это должно быть супер просто. Я продолжаю искать себя с готовым нокаут-приложением, за исключением последнего шага...
Фрагмент разметки:
<div id="wrapper" data-bind="foreach: headings">
<h1>Bind from this</h1>
<select data-bind="value: selectMenuIdVal, event: { change: updateListing }">
<option> </option>
<!-- ko foreach: $root.headings -->
<option data-bind="value: $data.CC_FIELD_ID, visible: $data.VENDOR_FIELD_NAME(), text: $data.VENDOR_FIELD_NAME"></option>
<!-- /ko -->
</select>
<h1>To this</h1>
<ul data-bind="foreach: listingFields">
<li data-bind="text: $data.VALUE"></li>
</ul>
</div>
KO Snippet:
var Heading = function(data) {
var self = this;
var heading = ko.mapping.fromJS(data, {}, this);
heading.selectMenuIdVal = ko.observable(heading.CC_FIELD_ID());
// heading.listingFields gets mapped by the mapping plugin
this.updateListing = function(ko_evt, js_evt) {
//TODO
// Get the listing results from the value of the select menu
// self.listingFields(those listings);
}
return heading;
}
Вот моя скрипка: http://jsfiddle.net/breck421/SLT9B/1/
1 ответ
Я действительно не уверен, правильно ли вы поняли.
Пожалуйста, дайте мне знать, если это то, что вы ищете:
this.updateListing = function (ko_evt, js_evt) {
console.log("fired");
//Do something freaking awesome!!!!!!!
if (vm.dataRepo) {
for (var i = 0; i < vm.dataRepo.HEADINGS.length; i++) {
if (vm.dataRepo.HEADINGS[i].CC_FIELD_ID == heading.selectMenuIdVal()) {
var listingFields = [];
for (var j = 0; j < vm.dataRepo.LISTINGS.length; j++) {
var listing = vm.dataRepo.LISTINGS[j];
var field = listing[i];
if (field) {
listingFields.push(field);
}
}
heading.listingFields(listingFields);
// heading.listingFields = listingFields;
}
}
}
}
Я надеюсь, что это помогает.