ember.js - {{#linkTo}}单击期间没有方法 'addArrayObserver'

嘿，不确定是否有人可以帮助我，但很长一段时间以来我一直在努力解决此错误:
"Uncaught TypeError: Object <App.AssetType:ember408:2> has no method 'addArrayObserver'"
这是带有{{#linkTo}}的模板，单击该模板会产生此错误

<div class="row">
  <div class="twelve columns">
    <h2>{{title}} - Assets</h2>
  </div>
</div>
<div class="row">
  <div class="three columns">
    <ul>
      {{#each assetTypes}}
      {{#linkTo 'product.filter' this}}{{title}}{{/linkTo}}
      {{/each}}
    </ul>
  </div>
  <div class="nine columns">
    {{outlet}}
  </div>
</div>

和应用程序代码

window.App = Ember.Application.create
  rootElement: '.solution_products_documents'

App.ApplicationRoute = Ember.Route.extend
  model: ->
    App.Product.find()
App.ApplicationController = Ember.ArrayController.extend
  sortProperties: ['title']

App.ProductRoute = Ember.Route.extend
  model: (params) ->
    App.Product.find params.product_id
  setupController: (controller, model) ->
    controller.set 'documents', model.get 'document_ids'

App.ProductController = Ember.ObjectController.extend
  assetTypes: (->
    docs = @get('documents')
    docs.getEach 'asset_type_id'
  ).property('documents')

App.ProductFilterRoute = Ember.Route.extend
  model: (params) ->
    type = App.AssetType.find params.asset_type_id
    product = this.modelFor 'product'
    docs = product.get 'document_ids'
    model = docs.filterProperty 'asset_type_id', type
App.ProductFilterController = Ember.ArrayController.extend()

App.Router.map ->
  @route 'index', { path: '/' }
  @resource 'product', { path: '/products/:product_id' }, ->
    @route 'filter', { path: '/filter-by/:asset_type_id' }

##
# MODELS / EMBER-DATA
##

serializer = DS.JSONSerializer.create()

serializer.configure 'App.Document',
  sideloadAs: 'documents'

serializer.configure 'App.AssetType',
  sideloadAs: 'asset_types'

serializer.configure 'App.Product',
  sideloadAs: 'products'

App.RestAdaptor = DS.RESTAdapter.extend
  serializer: serializer
  namespace: URL.slice 1
DS.Store.extend(
  adapter: App.RestAdaptor
  revision: 11
).create()

App.Product = DS.Model.extend
  title: DS.attr 'string'
  document_ids: DS.hasMany 'App.Document'

App.Document = DS.Model.extend
  title: DS.attr 'string'
  product_id: DS.belongsTo 'App.Product'
  asset_type_id: DS.belongsTo 'App.AssetType'

App.AssetType = DS.Model.extend
  title: DS.attr 'string'
  document_ids: DS.hasMany 'App.Document'

######### /> END MODELS #################

如果将URL #/products/4/filter-by/2放入地址栏中，则一切按计划进行。仅当我单击{{#linkTo}}时，才出现此错误，并且不显示内容。该错误在到达App.ProductFilterRoute之前就被抛出，因为该路由中的debugger语句没有执行，但它是页面刷新的。

非常感谢您的帮助或指导，因为我真的不知道在哪里寻找。

更新:

如果我不使用{{#linkTo}}帮助器，而是手动构造url
<a href="#/products/{{unbound controller.content.id}}/filter-by/{{unbound this.id}}">{{title}}</a>
一切正常。 linkTo和manual href有什么区别？

最佳答案

该错误基本上表明，当您导航到ProductFilterRoute时，Ember需要一个数组。

为什么Ember在这里需要一个数组？

您的路线(ProductFilterController)的 Controller 的类型为ArrayController 。

我对coffeescript不太熟悉，但是您的模型挂钩似乎也返回了一个数组。 重要说明:仅在通过网址进入您的应用程序时执行模型挂钩。 (这就是为什么您通过Url和href手动进行导航的原因。EmberDoc引用:“您可以实现一个钩子(Hook)，将URL转换为该路线的模型。”)

为什么会引发错误？
因此，您的路线围绕数组旋转。您只传递了一个普通对象。因此，黄金法则是:将相同的数据结构(在这种情况下为数组)传递给{{linkTo}}帮助器，该帮助器由模型挂钩实现返回。

可能的解决方案:

使用操作代替{{linkTo}}

在您的路线中实施一项操作，以查找具有给定asset_type的所有文档并将其传递到您的路线。

对模板的修改:

<a {{action 'filterProductByAsset' this}}> {{title}} </a>

ProductFilterRoute的扩展:

events:{
    filterProductByAsset : function(assetTypeId){
        type = App.AssetType.find(asset_type_id);
        product = this.modelFor('product');
        docs = product.get('document_ids');
        models = docs.filterProperty('asset_type_id', type);
        this.transitionTo("product.filter", models)
    }
}

关于ember.js - {{#linkTo}}单击期间没有方法 'addArrayObserver'，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15177093/