Javascript 将对象模型作为单个对象传递给ArrayController

我有一个起始页，要求用户输入

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>

韩元交易报价器
{{outlet}}
{{view Em.TextField valueBinding=“apiKey”placeholder=“API Key”action=“getDeals”}


赢得交易！
{{{#每个模型}
{{name}}
{{/每个}}

这里的问题是，当您将第二个参数传递给

Route#transitionTo

时，Ember.js假定您传递的是模型，并将其设置为控制器的模型，而不是使用

模型

钩子

问题在于：

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

现在，Ember.js相信

this.apiKey

是您路线的模型，并将跳过调用路线的

model

钩子，直接将您传递的设置为控制器的模型

我可以想出两种方法：

方法1（首选）

您可以创建一个新资源来包装

交易

资源：

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

以及：

方法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);
}

---

这里的问题是，当您将第二个参数传递给

Route#transitionTo

时，Ember.js假定您传递的是模型，并将其设置为控制器的模型，而不是使用

模型

钩子

问题在于：

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

现在，Ember.js相信

this.apiKey

是您路线的模型，并将跳过调用路线的

model

钩子，直接将您传递的设置为控制器的模型

我可以想出两种方法：

方法1（首选）

您可以创建一个新资源来包装

交易

资源：

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

以及：

方法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);
}

---

您是否从控制台发布了相同的错误消息？我不知道“asdf”是从哪里来的是的。

start

视图包含一个文本字段，我键入“asdf”作为

apiKey

，并使用其下方的按钮提交。您是否从控制台发布了相同的错误消息？我不知道“asdf”是从哪里来的是的。

start

视图包含一个文本字段，我键入了“asdf”作为

apiKey

，并使用它下面的按钮提交了它。这太棒了。我实现了“方法1”，效果很好。我正试图弄明白为什么它有效。因此，由于我们为交易创建了一个单独的资源，其中一个可以是预期的数组和Api资源，并保持为普通对象资源？是的，我们现在有两个资源：

Api

->

Api\u key

，和

posts

->posts数组，没有

api

资源，

posts

资源就无法存在，因为它嵌套在

api

资源中。感谢您的帮助！有这么多的约定（这很好），但我仍在努力思考自动创建的内容和最佳实践。这太棒了。我实现了“方法1”，效果很好。我正试图弄明白为什么它有效。因此，由于我们为交易创建了一个单独的资源，其中一个可以是预期的数组和Api资源，并保持为普通对象资源？是的，我们现在有两个资源：

Api

->

Api\u key

，和

posts

->posts数组，没有

api

资源，

posts

资源就无法存在，因为它嵌套在

api

资源中。感谢您的帮助！有这么多的约定（这很好），但我仍在努力思考自动创建的内容和最佳实践。