使用复选框和布尔属性触发显示的项目

Question

设置：

ember new shop                                                              
cd shop
ember install:addon ember-cli-scaffold
ember generate scaffold product name:string available:boolean
ember generate adapter product

app/adapters/product.js

import DS from "ember-data";

export default DS.FixtureAdapter.extend({});

app/models/product.js

import DS from 'ember-data';

var Product = DS.Model.extend({
  name: DS.attr('string'),
  available: DS.attr('boolean')
});

Product.reopenClass({
  FIXTURES: [
    {
      id: "1",
      name: 'Orange',
      available: true
   }, {
     id: "2",
     name: 'Apple',
     available: false
    }, {
      id: "3",
      name: 'Banana',
      available: true
  }
]});

export default Product;

这将产生以下 http://localhost:4200/products 页面：

Problem/Question

我想在 http://localhost:4200/products 顶部添加一个 available 复选框以触发显示的产品。如果选中，则仅显示可用产品。如果未选中，则仅显示不可用的产品。

我该怎么做？ best/cleanest 方法是什么？

Answer 1

ember g controller products/index

app/controller/products/index.js

import Ember from 'ember';

export default Ember.Controller.extend({
    products: function(){
      var model = this.get('model');
      var displayAvailable = this.get('displayAvailable') || false;
      return model.filterBy('available', displayAvailable);
    }.property('displayAvailable')
});

app/template/products/index.hbs（前 25 行）

<h1>Products list</h1>

<p>
  {{link-to "New Product" "products.new" }}
</p>

{{input type="checkbox" checked=displayAvailable }} Display Available Products

{{#if products.length}}
  <table>
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Available
        </th>
        <th colspan="3">
          Actions
        </th>
       </tr>
     </thead>
     <tbody>
       {{#each product in products}}

使用复选框和布尔属性触发显示的项目

Trigger displayed items with a checkbox and a boolean attribute

ember.js

ember-data

ember-cli