Ember.Select視圖抱怨通過的值

Question

我有一個Ember.js（1.0.0）應用程序，我試圖實現內置的Ember.Select視圖。

該應用程序顯示了三個任務列表：inProgress,completed和unassigned。用戶可以過濾相應項目顯示的任務。這就是Ember.Select視圖進來。然而，當我加載路線，灰燼向我吠叫約的價值，我給它的類型：

Assertion failed: The value that #each loops over must be an Array. You passed projects.all

Uncaught TypeError: Object projects.all has no method 'addArrayObserver'

Uncaught Error: Something you did caused a view to re-render after it rendered but before it was inserted into the DOM.

我一直在摔跤幾個小時，嘗試下面的代碼不同的排列 - 我知道我必須丟失的東西明顯，因爲它只是不能難以獲得這樣一個簡單的組件來正常工作。希望你們能指引我朝正確的方向發展。

這裏是我的路線：

Bee.TasksIndexRoute = Bee.Auth.Route.extend 
    setupController: (ctrl) -> 
     # get tasks 
     Bee.Auth.send 
      url: Bee.endpoint "/tasks" 
     .done (tasks) -> 
      ctrl.set "tasks.all", tasks 
     # get projects 
     Bee.Auth.send 
      url: Bee.endpoint "/projects" 
     .done (projects) -> 
      ctrl.set "projects.owned", projects.owned 
      ctrl.set "projects.participating", projects.participating 
      ctrl.set "projects.all", projects.owned.concat projects.participating 

這裏是我的控制器：

Bee.TasksIndexController = Ember.ObjectController.extend 
    project: null 
    content: 
     tasks: 
      all: [] 
      inProgress: [] 
      completed: [] 
      unassgined: [] 
    projects: 
     all: [] 
     owned: [] 
     participating: [] 
    visible: (-> 
     ctrl = @ 
     # filter tasks here    
    ).property "project" 

這裏是我的模板：

<script type="text/x-handlebars" id="tasks/index"> 
    <div class="center-pane"> 
     <div class="top_options"> 
      <div class="project_filter"> 
       <strong>Viewing: </strong> 
       {{view Ember.Select 
        content=projects.all 
        optionValuePath='content._id' 
        optionLabelPath='content.title' 
        value=project 
        prompt='All Tasks' 
       }} 
      </div> 
      <strong class="gold-gradient option_button"> 
       {{#link-to 'tasks.create' classNames='new_task'}}Create Task{{/link-to}} 
      </strong> 
     </div> 
     <div class="col3"> 
      <div class="col-header in-progress light-gradient"> 
       <h3>In Progress</h3> 
      </div> 
      <div id="tasks_active_list"> 
       {{#if visible.inProgress.length}} 
        <ul>{{#each visible.inProgress}}{{view Bee.TaskListView}}{{/each}}</ul> 
       {{else}} 
        <p class="no_projects">None</p> 
       {{/if}} 
      </div> 
     </div> 
     <div class="col3"> 
      <div class="col-header completed light-gradient"> 
       <h3>Completed</h3> 
      </div> 
      <div id="tasks_closed_list"> 
       {{#if visible.completed.length}} 
        <ul>{{#each visible.completed}}{{view Bee.TaskListView}}{{/each}}</ul> 
       {{else}} 
        <p class="no_projects">None</p> 
       {{/if}} 
      </div> 
     </div> 
     <div class="col3"> 
      <div class="col-header unassigned light-gradient"> 
       <h3>Unassigned</h3> 
      </div> 
      <div id="tasks_unassigned_list"> 
       {{#if visible.unassigned.length}} 
        <ul>{{#each visible.unassigned}}{{view Bee.TaskListView}}{{/each}}</ul> 
       {{else}} 
        <p class="no_projects">None</p> 
       {{/if}} 
      </div> 
     </div> 
    </div> 
</script> 

任何有識之士將非常感激。我不知道Ember.Select是罪魁禍首，因爲當我用一個簡單的替換：

<select> 
    {{#each projects.all}} 
     <option value="{{_id}}">{{title}}</option> 
    {{/each}} 
</select> 

...它呈現很好 - 但是我需要使用Ember.Select這樣我就可以值綁定到project財產在TasksIndexController - 因爲我會用它作爲可見的函數來觸發visible函數。

Answer 1

嘗試將projects.all設置爲null。也許ember select在類上的pojo默認數組有問題。

Bee.TasksIndexController = Ember.ObjectController.extend 
    project: null 
    content: 
     tasks: 
     all: [] 
     inProgress: [] 
     completed: [] 
     unassgined: [] 
    projects: 
    all: null 
    owned: [] 
    participating: [] 
    visible: (-> 
    ctrl = @ 
    # filter tasks here    
).property "project" 



setupController: (ctrl) -> 
    # get tasks 
    Bee.Auth.send 
     url: Bee.endpoint "/tasks" 
    .done (tasks) -> 
     ctrl.set "tasks.all", tasks 
    # get projects 
    Bee.Auth.send 
     url: Bee.endpoint "/projects" 
    .done (projects) -> 
     ctrl.set "projects.owned", projects.owned 
     ctrl.set "projects.participating", projects.participating 
     ctrl.set "projects.all", projects.owned.concat projects.participating 

這裏有一個簡單的例子：http://emberjs.jsbin.com/aletIyU/3/edit