將對象模型作爲單個對象傳遞給ArrayController

Question

我有一個起始頁面，要求用戶輸入apiKey。使用該表單數據，我將其傳遞給我的deals路由，然後根據輸入的apiKey獲取相關數據。

我的問題是，當我直接與URI的apiKey加載交易頁面，它從形式start頁面上會並與apiKey提交的時候，我收到以下錯誤工作正常，但是，：

Uncaught Error: assertion failed: an Ember.CollectionView's content must implement Ember.Array. You passed 'asdf' 

這裏是app.js：

App = Ember.Application.create(); 

App.Store = DS.Store.extend({ 
    revision: 12, 
    adapter: 'DS.FixtureAdapter' 
}); 

App.Deal = DS.Model.extend({ 
    name: DS.attr('string') 
}); 

App.Deal.FIXTURES = [ 
    {id: 1, name: 'Deal 1'}, 
    {id: 2, name: 'Deal 2'} 
] 

App.Router.map(function() { 
    this.resource('start', { path: '/' }); 
    this.resource('deals', { path: '/deals/:api_key' }); 
}); 

App.StartController = Ember.ObjectController.extend({ 
    apiKey: '', 
    getDeals: function (model) { 
    this.transitionToRoute('deals', this.apiKey); 
    } 
}); 

App.DealsRoute = Ember.Route.extend({ 
    model: function() { 
    // return App.Deal.getWonFor(params.api_key); 
    return App.Deal.find(); 
    } 
}); 

App.DealController = Ember.ArrayController.extend({ 
}); 

App.DealsView = Ember.View.extend({ 
    didInsertElement: function() { 
    // Add active class to first item 
    this.$().find('.item').first().addClass('active'); 
    this.$().find('.carousel').carousel({interval: 1000}); 
    } 
}); 

下面是HTML：

<script type="text/x-handlebars"> 
    <h2>Won Deal Ticker</h2> 
    {{outlet}} 
    </script> 

    <script type="text/x-handlebars" data-template-name="start"> 
    {{view Em.TextField valueBinding="apiKey" placeholder="API Key" action="getDeals" }} 
    <br /> 
    <button {{action 'getDeals' apiKey}} class="btn btn-large">Get Won Deals!</button> 
    </script> 

    <script type="text/x-handlebars" data-template-name="deals"> 
    <div id="carousel" class="carousel slide"> 
     <div class="carousel-inner"> 
     {{#each model}} 
      <div class="item"> 
      {{name}} 
      </div> 
     {{/each}} 
     </div> 
    </div> 
    </script> 

Answer 1

這裏的問題是，當您向Route#transitionTo傳遞第二個參數時，Ember.js會假定您傳遞模型並將其設置爲控制器的模型，而不是使用model鉤子。

的問題是在這裏：

this.transitionToRoute('deals', this.apiKey); 

現在Ember.js認爲，this.apiKey是你的路由模式，將跳過呼叫路由的model鉤直接設置你的控制器的模型通過。

我能想到的解決此2種方式：

方法1（首選）

您可以創建一個新的資源用來包裝deals資源：

this.resource('api', { path: '/:api_key' }, function() { 
    this.resource('deals'); 
}); 

然後：

App.ApiRoute = Ember.Route.extend({ 
    model: function(params) { 
    return params.api_key; 
    } 
}); 

App.DealsRoute = Ember.Route.extend({ 
    model: function() { 
    return App.Deal.getWonFor(this.modelFor('api')); 
    } 
}); 

和：

getDeals: function() { 
    this.transitionToRoute('deals', this.apiKey); 
} 

方法2

下面這是一個快速的解決方法（可能不是最優的），但應該工作：

getDeals: function() { 
    var router = this.get('target'), 
     url = '/deals/' + this.apiKey; 

    Ember.run.once(function() { 
    router.get('location').setURL(url); 
    router.notifyPropertyChange('url'); 
    }); 

    this.router.router.handleURL(url); 
}