Ember.Router

Question

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

index.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>

app.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）相同的代码时，它可以按预期工作

Answer 1

啊，看起来它是＆＃39;追加你的观点＆＃39;对于你给出的应用程序＆＃39; Ember将寻找的模板名称。为什么不尝试将div放在body中，然后在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>

如果我错过了这一点，请告诉我;）

Answer 2

您需要使用应用的rootElement（docs here，相关问题：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>

Ember视图呈现在DOM的底部

2 个答案:

Ember.Router

查看