javascript - 渡された値について不平を言うEmber.Selectビュー

Question

Ember.Select組み込みビューを実装しようとしている Ember.js (1.0.0) アプリケーションがあります。

inProgressアプリケーションのこの部分には、 、completed、およびの 3 つのタスクのリストが表示されますunassigned。ユーザーは、対応するプロジェクトによって表示されるタスクをフィルターできます。ここでEmber.Selectビューの出番です。しかし、ルートをロードすると、Ember は私が与えている値のタイプについて私に吠えます:

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バインドできるようにを使用する必要があります。projectTasksIndexControllervisible