Ember.js 在DOM底部渲染的余烬视图_Ember.js_Handlebars.js

Ember.js 在DOM底部渲染的余烬视图

ember.js

Ember.js 在DOM底部渲染的余烬视图,ember.js,handlebars.js,Ember.js,Handlebars.js,我使用的是Ember，我的视图在HTMLDOM的最底层呈现，而不是在div元素中。以下是我的源代码： index.html: <body> <div id="test"> <script type="text/x-handlebars"> {{view Skills.RecommendedSkillsListView}} </script> </div> <script type="te

我使用的是Ember，我的视图在HTMLDOM的最底层呈现，而不是在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>

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

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

呈现的文档：

<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）使用相同的代码时，它的工作原理与预期一致

啊，它看起来像是在“将视图附加到”主体上，您已经为ember指定了要查找的“应用程序”模板名。为什么不尝试在主体中放置一个div，然后在Ember.Application.create（）中引用它呢

余烬路由器看法

如果我没有抓住要点，请告诉我；）

您需要使用应用程序的

rootElement

（，相关问题：）属性指定要将应用程序呈现到的元素：

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

以下是一个工作示例：

示例的渲染输出：

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

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

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

这个解决方案在我的示例中确实有效，但是如果我有两个div元素（#test和#test2），其中我希望在每个div元素中呈现一个特定的视图，该怎么办？您的解决方案只允许我更改根，但并不能真正解决我的问题。你知道吗？（我在这里的代码与ember-1.0.pre.min.js完美结合）谢谢您的时间@alxscms您应该在应用程序的单个

rootElement

下呈现所有的余烬模板，但是您可以使用余烬功能在

rootElement

内部呈现哪些元素方面具有完全的灵活性。下面是一个并排渲染3个视图的示例（）。它有点过时了，因此您必须查看当前版本的ember（）中如何执行此操作的当前指南。我也使用此答案解决了此问题，但仍然不知道为什么它不起作用。感谢您的回答，但这实际上并不能解决真正的问题：/请参阅我对上一个答案的评论！请帮我解释一下被否决的投票（无论谁被否决）谢谢：）