2013-08-26 114 views
1

我在使用ember時難以顯示select2組件上顯示的選定選項。這是我的控制器看起來像:在ember.select中動態設置選定選項使用select2 lib

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

您的幫助將不勝感激。謝謝。

UPDATE: enter image description here 這是我講的,則該選項被選擇,但不列入文本上出現的選擇上面,甚至當我使用的選擇視圖後「buuda」建議,仍然同樣的問題!

回答

2

我寫了一個select2視圖,它擴展了Ember.Select。你可以找到要點here。你可以在它的地方使用Ember.Select。

我不確定你的例子出了什麼問題,但你有控制器操縱視圖,這是不好的形式。觀察控制器內容並在更改時更新。