1

我有一个自定义视图来显示页面上当前模型导航的面包屑，这是它在我的模板（这是单一模型模板）中的外观：

<div class="breadcrumbs">
  {{view Mdm.BreadcrumbView}}
</div>

这是我渲染面包屑的视图：

App.BreadcrumbView = Ember.View.extend
   templateName: 'breadcrumb'

   penultimate: (->
     content = @get('controller.content.self_and_ancestors')
     content[content.length - 2]
   ).property('controller.content')

   last: (->
     content = @get('controller.content.self_and_ancestors')
     content[content.length - 1]
   ).property('controller.content')

这是呈现数据的面包屑模板：

 <ul class="breadcrumb">
   {{#if view.penultimate}}
     <li>{{#linkTo group view.penultimate}}Back{{/linkTo}}</li>
   {{/if}}
   <li>{{view.last.name}}</li>
 </ul>

我的视图使用的模型 ( controller.content) 具有嵌套数据self_and_ancestors，其中包含我当前所在页面所需的面包屑数据。我只对查看该last数组中的对象以及它之前的对象感兴趣以导航一页（这就是penultimateandlast正在显示的内容）。面包屑完美呈现，我可以正常导航，直到单击“返回”( penultimate) 链接。当我遇到以下错误时：

Uncaught TypeError: Cannot read property 'length' of undefined

出于某种原因，内容未定义，但我不确定为什么。有什么想法吗？

编辑：

Welp，这里有一个例子http://jsbin.com/ejazin/2。然而，在这个例子中工作，这让我觉得别的东西可能是问题所在。基本上，每次您在我的应用程序中单击面包屑链接时，路由器find都会根据 ID 执行 ajax 调用以查找该路由的当前组和所有子组。也许视图正试图在sub_groups数据从服务器返回之前提取数据......有没有办法检查/防止这种情况？

编辑编辑：

这可能会传达我想要做的更多 - http://jsbin.com/obazus/1/。

编辑编辑编辑：

好的，问题肯定是视图penultimate在模型中完成 ajax 请求之前正在渲染和调用。话虽这么说 - 确保模型的 ajax 请求完成后呈现的最佳方法是什么？

4

1 回答 1

1

在仔细查看您的用例之后，可能有帮助的是在此处查看新的路由器改款 。它仍然没有被广泛记录，应该很快就会作为博客文章出现在 ember 网站上，但它已经合并到 ember-latest 中，因此您将可以访问新的实现。尤其是&钩的接缝与您相关。beforeModelafterModel

例如，在afterModel钩子中，您可以执行以下操作：

App.PostsIndexRoute = Ember.Route.extend({
  afterModel: function(posts, transition) {
    if (posts.length === 1) {
      this.transitionTo('post.show', posts[0]);
    }
  }
});

希望能帮助到你。

于 2013-07-01T19:35:29.430 回答