Question

我的Ember应用程序会自动显示任务列表。模型填充如下：

model: function(){
    return this.store.find('task');
}

我的问题是，如何在视图中显示此模型的过滤版本？

如果我创建一条通往此的路线？任务/完成？

更新

我创建了一条路线：

App.Router.map(function(){
  this.resource('tasks', function(){
    this.resource('task', { path:'/:task_id' }, function(){
      this.route('edit');
    });
    this.route('create');
    this.route('completed');
  });
});

然后我打电话给：

App.TasksCompletedRoute = Em.Route.extend({
  // What i have to put here to show only completed tasks?
});

这是我的项目：https://github.com/fernandoperigolo/ember-crud-todo

Answer 1

您可以创建filteredContent属性，并使用TasksRoute中的所有任务进行设置，并且只使用TasksCompleted中已完成的任务进行设置。如下所示：

路线：

App.TasksRoute = Em.Route.extend({
  model: function(){
    return this.store.find('task');
  },
  setupController: function(controller, tasks) {
    controller.set('filteredContent', tasks);
  },
  actions:{
    check:function(task){
      task.set('done', true);
      task.save();
    },
    uncheck:function(task){
      task.set('done', false);
      task.save();
    }
  }
});

App.TasksCompletedRoute = Em.Route.extend({
  setupController: function() {
    this.controllerFor('tasks').set('filteredContent', this.modelFor('tasks').filterBy('done', true));
  }
});

因此，在您的任务模板中，请使用filteredContent代替controller：

<script type="text/x-handlebars" id="tasks">
    {{#link-to "tasks.create"}} Add task {{/link-to}}

    <h2>Task List:</h2>
    <ul>
      {{#each task in filteredContent}}
        <li>
          {{#if task.done}}
            <button {{action "uncheck" task}}>Uncheck</button>
          {{else}}
            <button {{action "check" task}}>Check</button>
          {{/if}}
          {{#link-to "task" task}}{{task.title}}{{/link-to}}
        </li>
      {{else}}
        <li>no tasks… :(</li>
      {{/each}}
    </ul>

    {{outlet}}
  </script>

如何显示我的模型的过滤版本？

1 个答案: