既存の値をフェッチしてビューモデルに挿入するカスタムバインディングに取り組んでいます。ただし、ko.bindingHandlersで提供された要素に子要素がないように見える問題が発生しました。
これはKnockoutJSでどのように機能するのですか、それとも何かが足りないのですか?
これが私のHTMLマークアップです:
<div data-bind="with: person, useInitValueFor: ['firstName', 'lastName']">
<div data-bind="text: firstName">John</div>
<div data-bind="text: lastName">Doe</div>
</div>
そして、これが私のJSコードです。
ko.bindingHandlers.useInitValueFor = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var $elem = $(element);
var value = ko.utils.unwrapObservable(valueAccessor());
var allBindings = allBindingsAccessor();
for (var i = 0; i < value.length; i++) {
var c = value[i];
var e = $elem.children('[data-bind*="' + c + '"]:first');
alert(e.length); // This gives me 0
if (e.length > 0) {
var a = e.attr('data-bind').split(',');
for (var j = 0; j < a.length; j++) {
var b = a[j].split(':');
switch (b[0]) {
case 'text':
allBindings.with[c](b[1]);
alert(allBindings.with[c]());
break;
}
}
}
}
}
};
function personViewModel() {
this.person = {
firstName: ko.observable(),
lastName: ko.observable()
};
}
$(document).ready(function() {
var vm = new personViewModel();
ko.applyBindings(vm);
});
こちらのjsFiddleでもご覧いただけます:http://jsfiddle.net/dzul1983/XjD3Y/1/