KnockoutJs: прямой адрес наблюдаемого объекта Array in view

Question

Я хочу пропустить наблюдаемый массив объектов, и в этом цикле я должен получить соответствующее значение другого наблюдаемого массива. Мне это не удается.

Мой код выглядит следующим образом.

Модель и ViewModel:

//**********MODEL******************** 
function Configuration() { 
var self = this; 

self.properties = ko.observableArray(); 
} 

function deviceProperty() { 
    var self = this; 

    self.property = ko.observable(""); 
    self.value = ko.observable(""); 
} 

//**********VIEWMODEL**************** 
function compareModelView() { 
var self = this; 

self.config1 = ko.observable(new Configuration); 
self.config2 = ko.observable(new Configuration); 

$().ready(function() { 
    //Load config1 and config2 
}); 

} 

//**********jQuery******************** 
(function ($) { 
    $(document).ready(function() { 
     ko.applyBindings(new compareModelView()); 
    }); 
})(jQuery); 

Вид:

<!-- ko foreach: config1().properties --> 
    <tr> 
    <td data-bind="text: property()"></td> 
    <td data-bind="text: value()"></td> 
    <td data-bind="text: $root.config2().properties()[$index].value()"></td> 
    </tr> 
<!-- /ko --> 

Knockoutjs выдает ошибку, говоря, что это свойство не существует.

Когда я делаю $root.config2().properties().length, он возвращает число (3). Когда я делаю $root.config2().properties()[0], он возвращает [Object] [Object]. Когда я делаю $root.config2().properties()[0], он возвращает пустую строку.

Но я не вижу, как я могу напрямую обратиться к значению свойства внутри объекта?

Answer 1

$index является наблюдаемым объектом (см. doc), поэтому вам нужно написать $index(), чтобы получить его значение.

Так следующее связывание должно работать:

<td data-bind="text: $root.config2().properties()[$index()].value()"></td> 

Хотя ваша главная проблема была $index(), но сам по себе это не решит ваше дело, потому что порядок населения коллекций имеет значения в этом сценарии, так что вы получите ошибки с вашей текущей настройкой.

Итак, если вы заселяете сначала config1() KO начинает связывать вашу таблицу, но если config2() еще не заполнен, вы получите некоторые неопределенные ошибки. Чтобы исправить это, вам нужно изменить порядок народонаселения, чтобы сначала заполнить config2().

Вы можете поиграть с этим здесь: http://jsfiddle.net/xwjKK просто измените порядок pupulateConfig2 и pupulateConfig1 позвоните, чтобы увидеть эффект.