3

所以我试图让 select2 插件与 Backbone.js / CakePHP 应用程序一起工作。这个想法是这个 select2 保存用于在任务完成时联系人们的电子邮件地址，但表单是可编辑的。我想要做的是（1）为正在编辑的任务加载/显示所有已保存的电子邮件地址，以及（2）我仍然希望 select2 执行 AJAX 搜索以列出已识别的电子邮件。我一直遇到这个问题，我既可以显示初始数据，也可以使用 AJAX 搜索功能。

我的 select2 框的当前代码是 Backbone.View，它看起来像：

define([
    'backbone',
    'jquery',
    'jquery.select2'
],
function(Backbone, $, select2) {

    var notificationSelector = Backbone.View.extend({

        notifications: undefined,

        events: {
            'change' : 'select2ContactsChanged'
        },

        initialize: function(attrs) {
            this.collection.on('add remove reset', this.render(), this);
            this.select2ContactsChanged(); 
        },                              

        render: function() {

            var contacts = ["abc@def.com", "joe@banana.com"];
            $('.notification-selector').attr('value', contacts);



            if(this.select2Control == undefined) 
            {
                // Do Search() + query here
                this.select2Control = this.$el.select2({
                    width: '200px',
                    placeholder: '@email',
                    tags: [],
                    minimumInputLength: 3,

                    // initSelection: function(element, callback) {
                    //  return $.ajax({
                    //      type: "GET",
                    //      url: "/notifications/fetch/",
                    //      dataType: 'json',
                    //      data: { id: (element.val()) },
                    //      success: function(data) {

                    //      }
                    //  }).done(function(data) {
                    //      console.log(data);
                    //  });
                    // },

                });
            }
            else
            {
                // Do Search() + query here
                this.select2Control = this.$el.select2({
                    width: '200px',
                    placeholder: '@email',
                    tags: [],
                    minimumInputLength: 3,

                    ajax: {
                        url: '/notifications/search/',
                        dataType: 'json',
                        data: function(term, page) {
                            return {
                                SearchTerm: term
                            };
                        },

                        results: function(data, page) {
                            return {
                                results: data
                            };
                        }
                    }
                });
            }

        },

        select2ContactsChanged: function() {
            var contacts = this.select2Control.val().split(',');
            this.collection.reset(contacts);
        }

    });

    return notificationSelector;
});

我阅读了 Select2 的创建者对其他人的回复（https://github.com/ivaynberg/select2/issues/392），其中他说使用“自定义查询”来实现我想要的。我很难找到相关的例子或对文档有足够的意义来弄清楚他的意思。谁能发现我做错了什么/错过了什么？

谢谢你的时间！

编辑我忘了提到——它附加到的 DOM 元素是<input type="hidden" multiple="true" class="notification-selector select2-result-selectable"></input>

4

1 回答 1

2

好的，我终于找到了解决方案。我误解了 $.ajax() ——我并没有真正想到它实际上是一个异步调用。我检查调用返回的数据的代码在 AJAX 实际完成之前运行，所以我总是不确定。

我为 AJAX 调用分配了一个变量，并设置了“async：false”，它运行良好。

fetchSetNotifications: function() {
            var addresses = $.ajax({
                method: 'GET',
                dataType: 'json',
                context: $('#notifications'),
                url: '/Notifications/fetch/',
                async: false,

            alert(addresses);
        }

然后我在“地址”中获得的 jqXHR 对象在“responseText”属性中包含我想要的响应数据。

于 2013-06-14T18:54:22.423 回答