16

我正在使用 Ember，我的视图在我的 HTML DOM 的最底部呈现，而不是在我的 div 元素内。这是我的源代码：

索引.html：

<body>
  <div id="test">
    <script type="text/x-handlebars">
      {{view Skills.RecommendedSkillsListView}}
    </script>
  </div>

  <script type="text/x-handlebars" data-template-name="recommended_skills_list">
  <a href="#" {{action "b"}}>DO A NEW THING</a>
  </script>

  <script src="js/libs/jquery-1.8.3.min.js"></script>
  <script src="js/libs/handlebars-1.0.rc.1.js"></script>
  <script src="js/libs/ember-1.0.0-pre.2.js"></script>
  <script src="js/app.js"></script>
</body>

应用程序.js：

Skills = Ember.Application.create({});
Skills.RecommendedSkillsListView = Ember.View.extend({
  templateName: 'recommended_skills_list',
  b: function(v) {
      alert('new hello');
  }    
});
Skills.initialize();

呈现的文档： 

<body class="ember-application">
  <div id="test"></div>

  <script src="js/libs/jquery-1.8.3.min.js"></script>
  <script src="js/libs/handlebars-1.0.rc.1.js"></script>
  <script src="js/libs/ember-1.0.0-pre.2.js"></script>
  <script src="js/app.js"></script>

  <div id="ember135" class="ember-view">
    <div id="ember140" class="ember-view">
      <a href="#" data-ember-action="1">DO A NEW THING</a>
    </div>
  </div>
</body>

注意：当使用与之前版本的 ember (0.9.5) 相同的代码时，它可以按预期工作

4

2 回答 2

22

啊，看起来它正在将您的视图“附加到”正文中，您已为 Ember 将查找的“应用程序”模板名称提供了该名称。为什么不尝试在正文中放置一个 div，然后在 Ember.Application.create(); 中引用它？

Ember.Router

Skills = Ember.Application.create({
  rootElement: '#test'
});

看法

<body>
  <div id="test"></div>

  <script src="js/libs/jquery-1.8.3.min.js"></script>
  <script src="js/libs/handlebars-1.0.rc.1.js"></script>
  <script src="js/libs/ember-1.0.0-pre.2.js"></script>
  <script src="js/app.js"></script>

  <div id="ember135" class="ember-view">
    <div id="ember140" class="ember-view">
      <a href="#" data-ember-action="1">DO A NEW THING</a>
    </div>
  </div>
</body>

如果我错过了重点，请告诉我；）

于 2013-01-11T18:22:19.550 回答
11

您需要指定元素以使用应用程序的rootElement（此处的文档，相关问题：Emberjs rootElement）属性来呈现您的应用程序：

Skills = Ember.Application.create({
    rootElement: "#test"
});

这是一个工作示例：jsfiddle example

示例的渲染输出：

<body>
  <div id="test" class="ember-application">
    <div id="ember135" class="ember-view">
      <div id="ember140" class="ember-view">
        <a href="#" data-ember-action="1">DO A NEW THING</a>
      </div>
    </div>
  </div>
</body>
于 2013-01-11T19:15:48.210 回答