Ember throwing не может установить свойство 'dataSourceBinding' значения undefined при попытке использовать модель на индексном маршруте

#ember.js

Вопрос:

Я только начинаю с простого стартового набора, пытаясь сделать что-то очень простое.

В моем приложении с конечным результатом будет список категорий и подкатегорий, которые служат навигатором для приложения. Поскольку я новичок в Ember, и просто чтобы заставить что-то работать, я решил начать с руководства Тома Дейла и попробовать двигаться оттуда. Итак, я настроил переменную для хранения некоторых фиктивных моделей, которые можно использовать просто для вывода чего-либо на экран.

Когда я пытаюсь запустить приложение, я получаю сообщение об ошибке Uncaught TypeError: Cannot set property 'dataSourceBinding' of undefined

РЕДАКТИРОВАТЬ — Я попытался переместить объявление переменной categories в начало app.js файл, но все равно выдает ту же ошибку.

Мой вопрос на самом деле состоит из двух вопросов:

Чего я не понимаю / делаю неправильно?
Я понимаю, что в конечном итоге настройка приложения с категориями в качестве модели в индексном действии, вероятно, не лучший подход. Этот список должен быть динамическим, поскольку он будет настраиваться пользователями. Есть ли лучший способ включить эту динамическую навигацию в основной шаблон?

app.js :

 MSSWApp = Ember.Application.create();

MSSWApp.Router.map(function() {
  this.resource('categories', function() {
    this.resource('category', { path: ':category_id' });
  });
});

MSSWApp.IndexRoute = Ember.Route.extend({
  model: function() {
    return categories;
  }
});

var categories = [{
  id: 1,
  title: "Auto amp; Mechanical"
}, {
  id: 2,
  title: "Beauty amp; Fashion"
}, {
  id: 3,
  title: "Careers amp; Education"
}];

index.html :

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="initial-scale=1.0">
  <title>Test Ember Model on Index</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <script type="text/x-handlebars">
    <h1>Categories</h1>
    <ul>
      {{#each in model}}
      <li>
        <h2>
          {{#link-to 'category' this}}
            {{title}}
          {{/link-to}}
        </h2>
        <ul>
          <li>
            <a href="#">Sub 1-1</a>
          </li>
          <li>
            <a href="#">Sub 1-2</a>
          </li>
          <li>
            <a href="#">Sub 1-3</a>
          </li>
        </ul>
      </li>
      {{/each}}
    </ul>
    {{outlet}}
  </script>

  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-1.1.2.js"></script>
  <script src="js/libs/ember-1.5.1.js"></script>
  <script src="js/app.js"></script>
  <!-- to activate the test runner, add the "?test" query string parameter -->
  <script src="tests/runner.js"></script>
</body>
</html>

Ответ №1:

Оказывается, шаблону нужно имя, иначе Ember предполагает, что это шаблон приложения.

настройка тега script следующим образом:

<script type="text/x-handlebars" data-template-name="index">

получилось