gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 01:30:04 24 4
gpt4 key购买 nike

嘿,不确定是否有人可以帮助我,但我已经为这个错误苦苦挣扎了很长时间:

"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 和手动 href 有什么区别?

最佳答案

错误基本上是说,当您导航到 ProductFilterRoute 时,Ember 需要一个数组。

为什么 Ember 期望这里有一个数组?

  1. 您的路由 (ProductFilterController) 的 Controller 类型为 ArrayController
  2. 我不是很熟悉 coffeescript,但是你的model hook 似乎也返回一个数组。 重要提示:模型 Hook 仅在通过 Url 进入您的 App 时执行。(这就是您通过 Url 和 href 进行手动导航的原因。引用自 EmberDoc:“您可以实现的 Hook 将 URL 转换为该路由的模型。”)

为什么会抛出错误?所以你的路线围绕一个数组。你传递的只是一个普通的对象。因此,黄金法则是:将相同的数据结构(在本例中为数组)传递给您的 {{linkTo}} 助手,它由您的模型 Hook 实现返回。

可能的解决方案:

  1. 使用操作代替 {{linkTo}}
  2. 在您的 route 实现一个操作,找到所有具有给定 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com