Ember视图呈现在DOM的底部

alx*_*cms 16 handlebars.js ember.js

我正在使用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>
Run Code Online (Sandbox Code Playgroud)

app.js:

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

渲染文件:

<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>
Run Code Online (Sandbox Code Playgroud)

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

Lit*_*vis 22

啊,看起来它正在"追加你的视图"到你已经给出了Ember将寻找的'应用'模板名称的主体.为什么不尝试将div放在body中,然后在Ember.Application.create()中引用它?

Ember.Router

Skills = Ember.Application.create({
  rootElement: '#test'
});
Run Code Online (Sandbox Code Playgroud)

视图

<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>
Run Code Online (Sandbox Code Playgroud)

如果我错过了这一点,请告诉我;)


Cra*_*den 11

您需要使用应用程序的rootElement(此处的文档,相关问题:Emberjs rootElement)属性指定要呈现应用程序的元素:

Skills = Ember.Application.create({
    rootElement: "#test"
});
Run Code Online (Sandbox Code Playgroud)

这是一个工作示例:jsfiddle示例

从示例中渲染输出:

<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>
Run Code Online (Sandbox Code Playgroud)