在使用 select2 lib 的 ember.select 中动态设置选定的选项答案

【问题标题】：dynamically setting selected option in ember.select which uses select2 lib在使用 select2 lib 的 ember.select 中动态设置选定的选项
【发布时间】：2013-08-26 14:31:20
【问题描述】：

当与 ember 一起使用时，我很难在 select2 组件上显示所选选项。这是我的控制器的样子：

AS_ANALYTICS.Exercise = Ember.Object.extend({
    id: null,
    name: null
});

AS_ANALYTICS.SelectedExercise = Ember.Object.extend({
    exercise: null,
    changed:function(){
        if(this.exercise.id!==null){

        }
    }.observes('exercise')
});

AS_ANALYTICS.selectedExercise = AS_ANALYTICS.SelectedExercise.create();

AS_ANALYTICS.ExerciseController = Ember.ArrayController.create({
    content:[],

    setContent:function(exercises){
        //each array controller has content property by default
        //selects seems to only use this property for some reason
        this.set('content',exercises);
        if(exercises.length==1){
           //SOMETHING IS OFF HERE!
            console.log(AS_ANALYTICS.ExerciseController.objectAt(0).get('id'));
            AS_ANALYTICS.selectedExercise.set('exercise',AS_ANALYTICS.ExerciseController.objectAt(0));
            $('#exerciseId').select2({
               width:'300px'
            }).select2('val',AS_ANALYTICS.ExerciseController.objectAt(0).get('id'));
       }
   },

    populateExercisesForClient:function(customerId){
        var self = this;
        jQuery.getJSON(AS.baseURL+'analytics/listCustomerExercisesJson',{"id":customerId}, function(json) {
            var exercises = [], i = 0,len = json.length;

            for(;i<len;i++){
                exercises.push(AS_ANALYTICS.Client.create({"id":json[i].id,"name":json[i].name}));
            }
            self.setContent(exercises);
        });
    }
});

我调用 populateExercisesForClient，它发出一个 ajax 请求来填充内容。当我单击 select2 组件时，在下拉列表中我可以看到该选项已突出显示，但不知何故，选择默认显示“请选择...”而不是所选选项的文本。

我的查看代码是：

AS_ANALYTICS.Select2SelectView = Ember.Select.extend({
    prompt: 'Please select...',
    classNames: ['input-xlarge'],

didInsertElement: function() {
    var elem = this.$();
    Ember.run(function() {
        Ember.run.scheduleOnce('afterRender', this, function(){
            elem.select2({
                width:'300px'
            });
        });
    });
},

willDestroyElement: function () {
    var elem = this.$();
    elem.select2("destroy");
}});

您的帮助将不胜感激。谢谢。

更新：这就是我要说的，该选项被选中，但文本没有出现在选择的顶部，即使在我使用“buuda”建议的选择视图之后，仍然是同样的问题！

【问题讨论】：

标签： ember.js jquery-select2

【解决方案1】：

我编写了一个扩展 Ember.Select 的 select2 视图。你可以找到要点here。您可以在其中使用 Ember.Select。

我不确定您的示例出了什么问题，但是您让控制器操纵视图，这不是好的形式。让视图观察控制器内容并在更改时更新。

【讨论】：