Я пытаюсь создать список навигации с вкладками. Я использую привязку foreach
к нокауту, но он отображает шаблон только для первого элемента в списке.
Если я удалю пользовательскую привязку i18nTranslateText
и просто использую вместо нее text
привязку, тогда foreach
отображает оба элемента в массиве tabs
.
UPDATE:
если я прокомментирую строку viewModel.LanguageSelected.subscribe(...);
то также это работает правильно для обоих элементов в списке.
Где я ошибаюсь?
$(function () {
ko.bindingHandlers.i18nTranslateText = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var param1 = valueAccessor(); // not used, but could be used.
$(element).html(jQuery.i18n.prop(param1));
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var param1 = valueAccessor(); // not used, but could be used.
$(element).html(jQuery.i18n.prop(param1));
viewModel.LanguageSelected.subscribe(function (key) {
if (key == 'English') {
viewModel.loadBundles('en');
}
else {
viewModel.loadBundles('es');
}
$(element).html(jQuery.i18n.prop(param1));
}.bind(this));
}
};
var View = new ViewModel();
ko.applyBindings(View.Load());
});
function ViewModel()
{
var self = this;
self.tabs = ['abc', 'xyz'];
self.Load = function () {
return self;
}
}
<ul class="nav nav-tabs" data-bind="foreach: tabs">
<li>
<a href="#" data-bind="i18nTranslateText: $data"></a></li>
</ul>
Проблема в том, что на модели представления нет свойства LanguageSelected
. Это то, что происходит,
i18nTranslateText
для элемента в индексе я в массивеinit
в специальном обработчике привязки. Работает, обновляет элемент htmlupdate
для настраиваемого обработчика привязки.viewModel.LanguageSelected.subscribe
и это вызывает ошибку скрипта. viewModel.LanguageSelected.subscribe
Uncaught TypeError - undefined
. Таким образом, выполнение останавливается, и вы получаете один отображаемый элемент В вашем втором сценарии, если вы закомментируете viewModel.LanguageSelected.subscribe
, тогда все будет в порядке. Это ответ на ваш конкретный вопрос, но я думаю, что модель представления, вставленная в вопросе, все еще неполна. Надеюсь это поможет!
tabs