新创建的选择元素的 Stickit 动态绑定答案

【问题标题】：Stickit dynamic binding for newly created select element新创建的选择元素的 Stickit 动态绑定
【发布时间】：2015-06-16 07:09:35
【问题描述】：

在我的项目中，我使用 Marionette 和 Stickit 进行双向数据绑定。

在那里我需要克隆具有选择和文本框的 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
            };
        }
    }
});

但选择框中的任何更改都不会触发模型更改。

【问题讨论】：

标签： jquery marionette jquery-select2 backbone-stickit

【解决方案1】：

找到解决方案：添加 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 绑定。

【讨论】：