1

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」が提案した選択ビューを使用した後でも、テキストは選択の上に表示されず、同じ問題です!

4

1 に答える 1

2

Ember.Select を拡張する select2 ビューを作成しました。ここで要点を見つけることができます。Ember.Select の代わりに使用できます。

あなたの例で何が問題なのかわかりませんが、コントローラーにビューを操作させていますが、これは良い形ではありません。ビューにコントローラーの内容を観察させ、変更時に更新します。

于 2013-08-26T15:11:06.737 に答える