EmberJS pre2把把手模板放在错误的地方 [英] EmberJS pre2 put handlebar templates on wrong place

查看:101
本文介绍了EmberJS pre2把把手模板放在错误的地方的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经尝试在我的网络应用程序的pre1到pre2更新EmberJS,但我注意到它把所有的手柄模板作为最后的身体元素,有时甚至没有。

I've try to update EmberJS from pre1 to pre2 on my web-app but I notice it put all handlebar templates as the last body elements, and sometime not at all.

我已经使用入门套件创建一个复制,简单地修改了放置div前后的模板显示模板会被添加到错误的地方。
运行与pre1相同的页面,它一切正常。

I've create a repro with the starter-kit with simple modification of putting div before and after the template to show the template will be added in the wrong place. Run this same page with pre1 and it all works just fine.

index.html

....

<body>
  <div>this is before the template</div>
  <script type="text/x-handlebars" data-template-name="application">
    <h1>Hello from Ember.js</h1>
  </script>
  <div>this is after the template</div>

....

推荐答案

text / x-handlebars脚本标签定义了一个Handlebar模板,它与您将页面放置在页面(头部,身体中的任何位置)无关。

The text/x-handlebars script tag defines a Handlebar template, and its irrelevant where you place it in the page (in the head, anywhere in the body).

在您的代码中,您定义了 ApplicationView 的模板。由于您使用路由器,所以ember将自动创建 ApplicationView 追加到Ember应用程序的根元素。默认情况下, rootElement 是正文:

In your code above you define the template for the ApplicationView. Since you use a router, ember automatically creates ApplicationView and appends it to the root element of your Ember app. By default, the rootElement is the body:

App.ApplicationView.create().appendTo(rootElement) // default rootElement = 'body'

appendTo 方法使用jQuery appendTo

and the appendTo method uses jQuery appendTo:

this.$().appendTo(target)

因此,如果要控制插入 applicationView 的位置,则需要设置 rootElement 在App实例中,如下所示:

Therefore if you want to control where the applicationView is inserted you need to set the rootElement in the App instance, like so:

  window.App = Ember.Application.create({
    rootElement: '#insert_my_app_here'
  });

...

  <body>
    <div>this is before the template</div>
    <script type="text/x-handlebars" data-template-name="application">
      <h1>Hello from Ember.js</h1>
    </script>
    <div id="insert_my_app_here"></div>
    <div>this is after the template</div>
  </body>

这篇关于EmberJS pre2把把手模板放在错误的地方的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆