SELECT2 AJAX不選擇結果 - Ember.js Ember Cli自定義組件

Question

Select2 4.0.0的AJAX功能似乎不起作用。它顯示來自AJAX的結果，但是當你點擊一個結果項時，它不會選擇它。我已經浪費了幾個小時，任何幫助將不勝感激。

下面的代碼不起作用：

var staticdata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]; 
self._select = self.$().select2({ 
    placeholder: self.get('placeholder'), 
    tokenSeparators: [','], 
    multiple: true, 
    ajax: { 
    url: "http://localhost:9990/api/v1/users/", 
    dataType: 'json', 
    delay: 250, 
    data: function (params) { 
     return { 
     q: params.term, // search term 
     page: params.page 
     }; 
    }, 
    processResults: function (data, page) { 
     return { 
     results: staticdata 
     }; 
    }, 
    cache: true 
    } 
}); 

然而，當我嘗試它沒有Ajax它的工作原理和結果選擇在輸入字段：

var staticdata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]; 
self._select = self.$().select2({ 
    placeholder: self.get('placeholder'), 
    tokenSeparators: [','], 
    multiple: true, 
    data: staticdata 
}); 

Answer 1

所以這問題是由於使用select2作爲自定義的燼元器件。

當您創建一個花哨組件時，您可以選擇一個現有的html標籤，例如

1. self.$('#selecttext').select2(...) 

凡HTML標籤位於您的餘燼CLI位置模板/組件/選擇2-component.hbs：

<select id="selecttext" class=" form-control input-md select2-hidden-accessible" multiple="" tabindex="-1" aria-hidden="true"> 
</select> 

或可選擇地使用剛剛初始化該組件是自：

2. self.$().select2(...) 

當使用方法2.我猜測select2 AJAX回調以某種方式失去了對select2組件的引用。因此，當您從列表中選擇一個結果時select2：選擇事件不會生成，因此未選擇結果值。

我測試了使用：

self._select.on("select2:selecting", function(e) { 
     alert('selecting'); 
    }); 

然而，當您使用方法1. Ajax回調不輸參考選擇2組件，併產生了「選擇2：選擇」事件和對結果預期工作可以被選中。

因此這個工程：

didInsertElement: function() { 
var self = this; 
var staticdata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]; 
self._select = self.$('#selecttext').select2({ 

    // note we are explicitly initialising select2 component on #selecttext 

    placeholder: self.get('placeholder'), 
    tokenSeparators: [','], 
    multiple: true, 
    tags: false, 
    //data: staticdata 
    ajax: { 
     url: "http://localhost:9990/api/v1/users/", 
     dataType: 'json', 
     delay: 250, 
     data: function (params) { 
     return { 
      q: params.term // search term 
     }; 
    }, 

    processResults: function (data, page) { 
     return { 
      results: staticdata 
     }; 
    }, 
    cache: true 
    } 
}); //select2 END 
} //didInsertElement END