javascript - Ember 入门

Question

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

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

返回所有现有的待办事项并将静态 html 替换为 Handlebars 以使其动态化:

<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

我对您的应用做了一些改动。在您有两个名为 App 和 Todo 的 Ember.Application 实例在同一范围内运行之前。默认情况下，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>

这将为您的 Controller 中的每个模型创建一个li元素(在本例中，来自计算的filteredTodos)。

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