Question

使用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");
}});

您的帮助将受到高度赞赏。感谢。

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

Answer 1

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

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

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

1 个答案: