在 Ember 模板中使用 linkTo 帮助程序时无法读取 null 的属性'container'

Question

我正在创建一个 Ember 应用程序作为从服务器返回的一些 HTML 的附加组件。我需要这个 HTML，以便搜索引擎可以索引网站，并加快用户的初始页面呈现速度。

所以我的应用程序由几个 Ember 视图组成，附加到服务器生成的 HTML 的不同 DOM 元素中。我不对路由使用主模板，所以我将每个路由的 renderTemplate 函数设置为不执行任何操作。

我的 Ember 应用程序绑定到 body 元素，我可以成功地将自定义视图附加到树下的元素。它的工作原理：

在此JSFiddle中，列表的最后三个元素由Ember附加

但是当我尝试在我的模板中使用linkTo助手时，我遇到了一个错误：

Uncaught TypeError: Cannot read property 'container' of null ember-latest.js:32224

其中是这个函数：

router: Ember.computed(function() {
     return get(this, 'controller').container.lookup('router:main');
}),

在这个JS小提琴中，我只是将linkTo添加到模板中，它破坏了所有内容

1. 一般来说，余烬可以这样工作吗 - 有很多视图分散在服务器呈现的 HTML 上？
2. 示例代码如何固定？

Answer 1

我已经在这里修复了你的小提琴，看看吧。

似乎你是Ember的入门，
所以这里有一些提示给你，

1. 您应该有一个application模板，该模板将是根模板，所有模板都将在其上呈现。
2. 您不应该使用 this.container.lookup 访问views，这仅用于调试。
3. 您不应该将views附加到 DOM，这是框架的工作。
4. 默认情况下，您的应用程序将追加到 html 的正文中，如果您希望将其追加到其他位置，请在创建 application 时提供 rootElement 属性。请参阅此处以配置您的application。
   

   rootElement 可以是 DOM 元素，也可以是 jQuery 兼容的选择器字符串。请注意，附加到根元素外部的 DOM 的视图将不会接收事件。如果指定自定义根元素，请确保仅在其中附加视图！

5. 不要像App.itemsController.set("content", model)那样全局访问任何控制器，如果要访问路由内的其他controller，请使用this.controllerFor，要在另一个controller内访问，请使用needs。
6. 您无需创建任何控制器实例，例如App.itemsController=Ember.ArrayController.extend({}).create();
   框架将处理所有这些。

Answer 2

我发现我需要另外将视图和容器绑定在一起才能使这个小提琴工作

  App.itemsView.set("controller", App.itemsController);
  App.itemsController.set("container", this.container);

因此，生成的工作代码片段如下所示：http://jsfiddle.net/ddegtyarev/6cBRx/6/

再次重申，我正在构建一个混合的 Ember 应用程序 - 即我直接从服务器返回了一些 HTML，还有一些在多个地方附加了多个 Ember 视图。这就是为什么我必须手动创建视图并将它们与控制器等绑定的原因。