1

我正在玩 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>

这是结果： 在此处输入图像描述

正如我所说，在此之前它运行良好。代码就在这里。

4

1 回答 1

2

我对你的应用做了一些改动。在您有两个在同一范围内Ember.Application调用App和操作的实例之前。Todo默认情况下，Ember 应用程序使用body元素作为rootElement（您的应用程序将要渲染的位置），因此您的应用程序正在发生碰撞。

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

根据您的图片，我认为您不需要两个应用程序，并且我假设您只想要 To Do 应用程序，所以我删除了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

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

于 2013-06-06T21:55:01.487 回答