Эмблерный вид, отображаемый в нижней части DOM

Я использую 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) он работает как ожидалось

Ответ 1

А, похоже, что это "добавление вашего представления" в тело, которое вы дали имя шаблона "приложение", которое будет искать Эмбер. Почему бы не попробовать поставить 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>

Сообщите мне, если я пропустил точку;)

Ответ 2

Вам нужно указать элемент для отображения вашего приложения с помощью rootElement (docs here, связанный с ним вопрос: Emberjs rootElement) свойство вашего приложения:

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

Вот рабочий пример: пример 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>