Ember入门

Question

我正在玩Ember做入门教程：http://emberjs.com/guides/getting-started/displaying-model-data/但我卡住了，我不知道我做错了什么。一切都很好，直到我得到显示模型数据，你只需要添加：

Todos.TodosRoute = Ember.Route.extend({
  model: function () {
    return Todos.Todo.find();
  }
});

返回所有现有的待办事项并用把手替换静态html以使其动态化：

<ul id="todo-list">
  {{#each controller}}
    <li>
      <input type="checkbox" class="toggle">
      <label>{{title}}</label><button class="destroy"></button>
    </li>
  {{/each}}
</ul>

这就是结果：

正如我所说，直到这一点，它才能正常工作。代码right here。

Answer 1

我已经改变了你的应用程序了。在同一作用域中运行两个名为Ember.Application和App Todo的实例之前。默认情况下，Ember应用使用body元素作为rootElement（您的应用将要呈现的位置），因此您的应用会发生冲突。

如果确实需要在同一页面上运行两个应用，请使用Application#rootElement通知选择器您希望应用呈现的元素。我会说当你有多个应用程序共享同一个文档时，你应该避免使用body作为rootElement。（如果那是你想要的）。

根据您的图片，我认为您不需要两个应用，我假设您只想要待办事项应用，因此我删除了App，只留下了Todo（请参阅固定jsbin）。

我注意到你的所有HTML都是静态的，你根本没有使用Handlebars，以及一些已修复的错误js引用。

而不是执行以下操作：

  <section id="main">
    <ul id="todo-list">
      <li class="completed">
        <input type="checkbox" class="toggle">
        <label>Learn Ember.js</label><button class="destroy"></button>
      </li>
      <li>
        <input type="checkbox" class="toggle">
        <label>...</label><button class="destroy"></button>
      </li>
      <li>
        <input type="checkbox" class="toggle">
        <label>Profit!</label><button class="destroy"></button>
      </li>
    </ul>
  <!-- more stuff-->

使用Handlebars，因为它提供了{{each}}帮助程序，允许您像这样迭代您的集合：

    <ul id="todo-list">
    {{#each filteredTodos itemController="todo"}}
      <li {{bindAttr class="isCompleted:completed isEditing:editing"}}>
        {{#if isEditing}}
          {{view Todos.EditTodoView todoBinding="this"}}
        {{else}}
          {{view Ember.Checkbox checkedBinding="isCompleted" class="toggle"}}
            <label {{action "editTodo" on="doubleClick"}}>{{title}}</label>
            <button {{action "removeTodo"}} class="destroy"></button>
        {{/if}}
      </li>
    {{/each}}
    </ul>

这将为您控制器中的每个模型创建一个li元素（在本例中，来自计算出的filteredTodos）。

我强烈建议您深入了解guides以了解有关余烬的更多信息。