我已经创建了一个自定义绑定处理程序来呈现html选择组件。
EG:
<select data-bind="dynamicSelect: { src: 'Category', label: 'Category'} "></select>
用户选择一个类别后,将填充类别字段数组,我已将其绑定到将呈现某个模板的div
<div data-bind="template: { name: displayMode, foreach: categoryFields }"></div>
我的模板
<script type="text/html" id="inputTemplate">
<label data-bind="text: FieldName, attr: { for: FieldName }"></label>
<input data-bind="attr: { name: FieldName, type: $parent.fieldType($data) }" />
</script>
<script type="text/html" id="lookupTemplate">
<label data-bind="text: FieldName, attr: { for: FieldName }"></label>
<select data-bind="dynamicSelect: { src: FieldName, label: FieldName}"></select>
</script>
问题是,模板内的dynamicSelect似乎没有绑定?我如何在模板中重用绑定处理程序?
绑定处理程序
define(['durandal/composition', 'plugins/http'], function (composition, http) {
composition.addBindingHandler('dynamicSelect', {
init: function (element, valueAccessor) {
console.log(element);
console.log(valueAccessor());
var elem = $(element);
elem.addClass('hidden');
elem.before('<label>' + valueAccessor().label + '</label>');
elem.after('<div><br/><label><i class="icon-spinner icon-spin active"></i> Loading...</label></div>');
console.log('/api/lookup?type=' + valueAccessor().src);
return http.get('/api/lookup?type=' + valueAccessor().src).then(function (res) {
var items = res.LookupItems;
$.each(items, function (idx) {
elem.append('<option value=' + items[idx].Id + '>' + items[idx].Name + '</option>');
});
elem.removeClass('hidden');
elem.next().addClass('hidden');
});
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
}
});
});
答案 0 :(得分:1)
找到了我的问题。
我使用Durandals,组合助手注册了绑定处理程序。因此(以及我最好的猜测),它只在页面创建期间被调用。解释为什么我的第一个选择被填充。
我将绑定处理程序更改为
define(['plugins/http'], function (http) {
ko.bindingHandlers.dynamicSelect = {
init: function (element, valueAccessor) {
var elem = $(element);
elem.addClass('hidden');
elem.before('<label>' + valueAccessor().label + '</label>');
elem.after('<div><br/><label><i class="icon-spinner icon-spin active"></i> Loading...</label></div>');
console.log('/api/lookup?type=' + valueAccessor().src);
return http.get('/api/lookup?type=' + valueAccessor().src).then(function (res) {
var items = res.LookupItems;
$.each(items, function (idx) {
elem.append('<option value=' + items[idx].Id + '>' + items[idx].Name + '</option>');
});
elem.removeClass('hidden');
elem.next().addClass('hidden');
});
}
};
});
答案 1 :(得分:1)
这不能回答你的问题,但它解决了你的代码中缺乏MVVM思维模式的问题。 :d
我会这样做有一个ViewModel
MyApp.LookupViewModel = function(label, src) {
this.label = label;
this.src = src;
this.items = ko.observableArray();
this.selectedItem = ko.observable();
this.loading = ko.observable(true);
this.loaded = ko.computed(function() {
return !this.loading();
}, this);
//simulate ajax
setTimeout(function() {
this.items([{
name: "Foo1",
id: 1
},{
name: "Foo2",
id: 2
}
]);
this.loading(false);
}.bind(this), 1000);
};
当您想要使用它时,您只需声明VM的实例
MyApp.ViewModel = function() {
this.lookup = new MyApp.LookupViewModel("Foo", "http://foo");
}
我上面的小提琴使用了我的一个小lib,负责查找视图名称,这样你就不需要在视图中明确声明模板绑定。