新创建的 select 元素的 Stickit 动态绑定
Stickit dynamic binding for newly created select element
在我的项目中,我使用 Marionette 和 stickit 进行双向数据绑定。
在那里我需要克隆具有 select 和文本框的 div 元素。
var $template = $('#template-clone');
var $clone = $template.clone();
$clone.show();
var observeSelectID = $clone.find('select').attr('id');
var selectID = '#'+observeSelectID;
之后我尝试使用 stickit 绑定新创建的元素。
this.addBinding(null, {
selectID : {
observe : observeSelectID,
initialize : function($el) {
$(selectID).select2({
});
},
},
selectOptions : {
collection : function(data) {
var option = "{Label value pair JSON String}"
return {
'opt_labels' : ['List'],
'List' : option
};
}
}
});
但是 select 框中的任何更改都不会触发模型更改。
得到解决方案:
添加 select2 stickit 的处理程序。
Backbone.Stickit.addHandler({
selector : 'select.select2',
initialize : function($el, model, opt) {
var e = 'change:' + opt.observe,
self = this;
$el.select2();
var up = function(m, v, o) {
if (!o.stickitChange)
$el.trigger("change");
};
this.listenTo(model, e, up);
this.listenTo(model, 'stickit:unstuck', function() {
self.stopListening(model, e, up);
});
}
});
并在创建新元素时添加其绑定
var textareaObserve = $('#textarea').attr('id');
var textareaID = '#' + textareaObserve;
self.bindings[selectedID] = observeSelectID;
self.addBinding(self.model, selectedID, observeSelectID);
将进行 select2 绑定。
在我的项目中,我使用 Marionette 和 stickit 进行双向数据绑定。
在那里我需要克隆具有 select 和文本框的 div 元素。
var $template = $('#template-clone');
var $clone = $template.clone();
$clone.show();
var observeSelectID = $clone.find('select').attr('id');
var selectID = '#'+observeSelectID;
之后我尝试使用 stickit 绑定新创建的元素。
this.addBinding(null, {
selectID : {
observe : observeSelectID,
initialize : function($el) {
$(selectID).select2({
});
},
},
selectOptions : {
collection : function(data) {
var option = "{Label value pair JSON String}"
return {
'opt_labels' : ['List'],
'List' : option
};
}
}
});
但是 select 框中的任何更改都不会触发模型更改。
得到解决方案: 添加 select2 stickit 的处理程序。
Backbone.Stickit.addHandler({
selector : 'select.select2',
initialize : function($el, model, opt) {
var e = 'change:' + opt.observe,
self = this;
$el.select2();
var up = function(m, v, o) {
if (!o.stickitChange)
$el.trigger("change");
};
this.listenTo(model, e, up);
this.listenTo(model, 'stickit:unstuck', function() {
self.stopListening(model, e, up);
});
}
});
并在创建新元素时添加其绑定
var textareaObserve = $('#textarea').attr('id');
var textareaID = '#' + textareaObserve;
self.bindings[selectedID] = observeSelectID;
self.addBinding(self.model, selectedID, observeSelectID);
将进行 select2 绑定。