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