Javascript Ember.js并选择要删除的多个模型

在ember.js文档中，我找到了以下内容：

控制器允许您使用显示逻辑装饰模型。通常，您的模型将具有保存到服务器的属性，而控制器将具有应用程序不需要保存到服务器的属性

我正在尝试将“选择”功能添加到我的应用程序中

以下是JSFIDLE：

筛选器属性似乎是按模型而不是按控制器进行筛选（因为console.log为空）

如何正确编写removeSelected操作

在控制器中存储“isSelected”的正确方法是否正确？我认为为模型添加isSelected不是正确的方法，因为这个属性不会通过RESTAPI从服务器加载，也不会保存到它

application.js:

window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();



App.Test = DS.Model.extend({
  title: DS.attr('string'),
});


App.Test.FIXTURES = [
 {
   id: 1,
   title: 'Learn Ember.js',
 },
 {
   id: 2,
   title: '...',
 },
 {
   id: 3,
   title: 'Profit!',
 }
];

App.IndexRoute = Ember.Route.extend({
  model: function () {
    return this.get('store').find('test');
  }
});

App.IndexController = Ember.ArrayController.extend({
  actions: {
      removeSelected: function () {
        var selected = this.filterProperty('isSelected', true);
        console.log(selected);
      }
  },

});

App.TestController = Ember.ObjectController.extend({
  isSelected: false,
});

<script type="text/x-handlebars" data-template-name="index">
    <button {{action "removeSelected"}}>remove selected</button>
    <ul>
      {{#each itemController="test"}}
        <li>
          {{input type="checkbox" checked=isSelected}}
          <label>{{title}}</label>
        </li>
      {{/each}}
    </ul>
</script>

App.IndexController = Ember.ArrayController.extend({
  itemController: "test",
  actions: {
      removeSelected: function () {
        var selected = this.filterProperty('isSelected', true);
        console.log(selected);
      }
  }
});

<script type="text/x-handlebars" data-template-name="index">
    <button {{action "removeSelected"}}>remove selected</button>
    <ul>
      {{#each}}
        <li>
          {{input type="checkbox" checked=isSelected}}
          <label>{{title}}</label>
        </li>
      {{/each}}
    </ul>
</script>

index.html:

window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();



App.Test = DS.Model.extend({
  title: DS.attr('string'),
});


App.Test.FIXTURES = [
 {
   id: 1,
   title: 'Learn Ember.js',
 },
 {
   id: 2,
   title: '...',
 },
 {
   id: 3,
   title: 'Profit!',
 }
];

App.IndexRoute = Ember.Route.extend({
  model: function () {
    return this.get('store').find('test');
  }
});

App.IndexController = Ember.ArrayController.extend({
  actions: {
      removeSelected: function () {
        var selected = this.filterProperty('isSelected', true);
        console.log(selected);
      }
  },

});

App.TestController = Ember.ObjectController.extend({
  isSelected: false,
});

<script type="text/x-handlebars" data-template-name="index">
    <button {{action "removeSelected"}}>remove selected</button>
    <ul>
      {{#each itemController="test"}}
        <li>
          {{input type="checkbox" checked=isSelected}}
          <label>{{title}}</label>
        </li>
      {{/each}}
    </ul>
</script>

App.IndexController = Ember.ArrayController.extend({
  itemController: "test",
  actions: {
      removeSelected: function () {
        var selected = this.filterProperty('isSelected', true);
        console.log(selected);
      }
  }
});

<script type="text/x-handlebars" data-template-name="index">
    <button {{action "removeSelected"}}>remove selected</button>
    <ul>
      {{#each}}
        <li>
          {{input type="checkbox" checked=isSelected}}
          <label>{{title}}</label>
        </li>
      {{/each}}
    </ul>
</script>

删除选定的

{{{#each itemController=“test”}

{{input type=“checkbox”checked=isSelected}
{{title}}

{{/每个}}

在每个视图帮助器中使用

itemController

查看源代码。将创建新的阵列控制器，而不是使用

IndexController

。因此，

isSelected

将不会出现在

IndexController

中

如果您将

itemController

设置为

App.IndexController

，您将实现以下功能：

索引控制器：

window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();



App.Test = DS.Model.extend({
  title: DS.attr('string'),
});


App.Test.FIXTURES = [
 {
   id: 1,
   title: 'Learn Ember.js',
 },
 {
   id: 2,
   title: '...',
 },
 {
   id: 3,
   title: 'Profit!',
 }
];

App.IndexRoute = Ember.Route.extend({
  model: function () {
    return this.get('store').find('test');
  }
});

App.IndexController = Ember.ArrayController.extend({
  actions: {
      removeSelected: function () {
        var selected = this.filterProperty('isSelected', true);
        console.log(selected);
      }
  },

});

App.TestController = Ember.ObjectController.extend({
  isSelected: false,
});

<script type="text/x-handlebars" data-template-name="index">
    <button {{action "removeSelected"}}>remove selected</button>
    <ul>
      {{#each itemController="test"}}
        <li>
          {{input type="checkbox" checked=isSelected}}
          <label>{{title}}</label>
        </li>
      {{/each}}
    </ul>
</script>

App.IndexController = Ember.ArrayController.extend({
  itemController: "test",
  actions: {
      removeSelected: function () {
        var selected = this.filterProperty('isSelected', true);
        console.log(selected);
      }
  }
});

<script type="text/x-handlebars" data-template-name="index">
    <button {{action "removeSelected"}}>remove selected</button>
    <ul>
      {{#each}}
        <li>
          {{input type="checkbox" checked=isSelected}}
          <label>{{title}}</label>
        </li>
      {{/each}}
    </ul>
</script>

index.html:

window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();



App.Test = DS.Model.extend({
  title: DS.attr('string'),
});


App.Test.FIXTURES = [
 {
   id: 1,
   title: 'Learn Ember.js',
 },
 {
   id: 2,
   title: '...',
 },
 {
   id: 3,
   title: 'Profit!',
 }
];

App.IndexRoute = Ember.Route.extend({
  model: function () {
    return this.get('store').find('test');
  }
});

App.IndexController = Ember.ArrayController.extend({
  actions: {
      removeSelected: function () {
        var selected = this.filterProperty('isSelected', true);
        console.log(selected);
      }
  },

});

App.TestController = Ember.ObjectController.extend({
  isSelected: false,
});

<script type="text/x-handlebars" data-template-name="index">
    <button {{action "removeSelected"}}>remove selected</button>
    <ul>
      {{#each itemController="test"}}
        <li>
          {{input type="checkbox" checked=isSelected}}
          <label>{{title}}</label>
        </li>
      {{/each}}
    </ul>
</script>

App.IndexController = Ember.ArrayController.extend({
  itemController: "test",
  actions: {
      removeSelected: function () {
        var selected = this.filterProperty('isSelected', true);
        console.log(selected);
      }
  }
});

<script type="text/x-handlebars" data-template-name="index">
    <button {{action "removeSelected"}}>remove selected</button>
    <ul>
      {{#each}}
        <li>
          {{input type="checkbox" checked=isSelected}}
          <label>{{title}}</label>
        </li>
      {{/each}}
    </ul>
</script>

删除选定的

{{{#各}

{{input type=“checkbox”checked=isSelected}
{{title}}

{{/每个}}

---

这是一个更新的小提琴，使用每个视图辅助对象中的

itemController

查看源代码。将创建新的阵列控制器，而不是使用

IndexController

。因此，

isSelected

将不会出现在

IndexController

中

如果您将

itemController

设置为

App.IndexController

，您将实现以下功能：

索引控制器：

window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();



App.Test = DS.Model.extend({
  title: DS.attr('string'),
});


App.Test.FIXTURES = [
 {
   id: 1,
   title: 'Learn Ember.js',
 },
 {
   id: 2,
   title: '...',
 },
 {
   id: 3,
   title: 'Profit!',
 }
];

App.IndexRoute = Ember.Route.extend({
  model: function () {
    return this.get('store').find('test');
  }
});

App.IndexController = Ember.ArrayController.extend({
  actions: {
      removeSelected: function () {
        var selected = this.filterProperty('isSelected', true);
        console.log(selected);
      }
  },

});

App.TestController = Ember.ObjectController.extend({
  isSelected: false,
});

<script type="text/x-handlebars" data-template-name="index">
    <button {{action "removeSelected"}}>remove selected</button>
    <ul>
      {{#each itemController="test"}}
        <li>
          {{input type="checkbox" checked=isSelected}}
          <label>{{title}}</label>
        </li>
      {{/each}}
    </ul>
</script>

App.IndexController = Ember.ArrayController.extend({
  itemController: "test",
  actions: {
      removeSelected: function () {
        var selected = this.filterProperty('isSelected', true);
        console.log(selected);
      }
  }
});

<script type="text/x-handlebars" data-template-name="index">
    <button {{action "removeSelected"}}>remove selected</button>
    <ul>
      {{#each}}
        <li>
          {{input type="checkbox" checked=isSelected}}
          <label>{{title}}</label>
        </li>
      {{/each}}
    </ul>
</script>

index.html:

window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();



App.Test = DS.Model.extend({
  title: DS.attr('string'),
});


App.Test.FIXTURES = [
 {
   id: 1,
   title: 'Learn Ember.js',
 },
 {
   id: 2,
   title: '...',
 },
 {
   id: 3,
   title: 'Profit!',
 }
];

App.IndexRoute = Ember.Route.extend({
  model: function () {
    return this.get('store').find('test');
  }
});

App.IndexController = Ember.ArrayController.extend({
  actions: {
      removeSelected: function () {
        var selected = this.filterProperty('isSelected', true);
        console.log(selected);
      }
  },

});

App.TestController = Ember.ObjectController.extend({
  isSelected: false,
});

<script type="text/x-handlebars" data-template-name="index">
    <button {{action "removeSelected"}}>remove selected</button>
    <ul>
      {{#each itemController="test"}}
        <li>
          {{input type="checkbox" checked=isSelected}}
          <label>{{title}}</label>
        </li>
      {{/each}}
    </ul>
</script>

App.IndexController = Ember.ArrayController.extend({
  itemController: "test",
  actions: {
      removeSelected: function () {
        var selected = this.filterProperty('isSelected', true);
        console.log(selected);
      }
  }
});

<script type="text/x-handlebars" data-template-name="index">
    <button {{action "removeSelected"}}>remove selected</button>
    <ul>
      {{#each}}
        <li>
          {{input type="checkbox" checked=isSelected}}
          <label>{{title}}</label>
        </li>
      {{/each}}
    </ul>
</script>

删除选定的

{{{#各}

{{input type=“checkbox”checked=isSelected}
{{title}}

{{/每个}}

---

这是一个更新的小提琴，可使用此工作

Thnx获取帮助。我错误地认为在每个助手中设置itemController会将其设置为IndexController。不客气。在我的回答中，只是更新一下，

each itemController=“test”

不需要，只需要

each

。提琴是对的。谢谢你的帮助。我错误地认为在每个助手中设置itemController会将其设置为IndexController。不客气。在我的回答中，只是更新一下，

each itemController=“test”

不需要，只需要

each

。小提琴是对的。