1

ユーザーが を入力する必要がある開始ページがありますapiKey。そのフォーム データを使用して、それをルートに渡します。dealsルートは、入力された に基づいて関連データをフェッチしますapiKey。

私の問題はapiKey、URI で を使用して取引ページを直接読み込むと正常に動作することですが、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>
4

1 に答える 1

1

ここでの問題は、 に 2 番目の引数を渡すと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);
}
于 2013-04-10T07:53:03.183 に答える