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);
        }

「addresses」で取得した jqXHR オブジェクトには、「responseText」属性に必要な応答データが含まれています。

于 2013-06-14T18:54:22.423 に答える