0

目前边做边学 Ember.js。使用Ember 应用套件。

我有基本的关系 - 一个模型“订单”，它有很多“项目”。我用以下 .hbs 显示订单和项目。

// templates/order.hbs
Order:{{info}}
Items:
{{#each items itemController="item"}}
  {{#if isEditing}}
    {{sku}}:
    {{input value=quantity focus-out='acceptChanges'}}
  {{else}}
    {{sku}}:
    <p {{action 'editItem' on='doubleClick'}}>
    {{quantity}}
    </p>
  {{/if}}
{{/each}}
{{input type="text" value=search action='query'}}

控制器只处理这两个动作。

// controllers/item.js
export default Ember.ObjectController.extend({
    isEditing: DS.attr('boolean'),
    actions: {
        editItem: function () {
            this.set('isEditing', true);
        },
        acceptChanges: function () {
            this.set('isEditing', false);
            this.get('model').save();
        }
    }
});

和简单的模型。

// models/item.js
export default DS.Model.extend({
  order: DS.belongsTo('order', {async: true}),
  sku: DS.attr('string'),
  quantity: DS.attr('number'),
});

订单控制器处理来自 order.hbs 的查询操作。

// controllers/order.js
export default Ember.ObjectController.extend({
  actions: {
    query: function() {
      var q = this.get('search');
      Ember.Logger.log(q); // this prints value to console
      // TODO: somehow search for the item and set isEditing on it
    }
  }
}

这一切都很好。

我想添加以下功能： order.hbs 中的输入字段，可以在其中输入 SKU 并打开（内联，就像使用双击一样）相应的项目进行编辑。如何以及在何处（在哪个控制器或视图中）执行此操作？

我目前对 ember.js 的理解表明它与 ArrayControllers 或视图有关。但我还没有发现任何类似的实现。

更新： 将 isEditing 从模型移到控制器，更适合它的位置。将示例从“帖子和评论”更改为“订单和项目”。

UPDATE2： 我添加了输入字段“搜索”，我可以在订单控制器中检索它的值。但是我不相信这是处理项目搜索的地方，是吗？

4

1 回答 1

0

我改变了设计以实现我所需要的。

但是，这不再用于each订单hasMany项目。相反，每个订单都有项目资源并/order/:id重定向到/order/:id/items，因此 UX 不会改变。

// router.js
var Router = Ember.Router.extend();     
Router.map(function() {
  this.route('component-test');
  this.route('helper-test');
    this.resource('orders', function() {
        this.resource('order', {path: ':id'}, function() {
            this.resource('items');
        });
    });
});    
export default Router;

// routes/order.js
export default Ember.Route.extend({
    model: function(params) {
        return this.store.find('order', params.id);
    },
    redirect: function() {
        this.transitionTo('items');
    }
});

// routes/items.js
export default Ember.Route.extend({
    model: function() {
        var order = this.modelFor('order');
        return order.get('items');
    }
});

// templates/order.hbs
Order: {{info}}
{{outlet}}

// templates/items.hbs
<table>
    <tr>
        <th>SKU</th>
        <th>Quantity</th>
    </tr>
    {{#each}}
    <tr>
        <td>{{sku}}</td>
        {{#if isEditing}}
        <td>
              {{input value=quantity insert-newline='acceptChanges'}}
        </td>
        {{else}}
        <td {{action 'editItem' on='doubleClick'}}>
        {{quantity}}
        </td>
        {{/if}}
    </tr>
    {{/each}}
</table>
{{input type="text" value=searchItem action='query'}}

// controllers/items.js
export default Ember.ArrayController.extend({
    itemController: "item",
    actions: {
        query: function() {
            var si = this.get('searchItem');
            var x = this.findBy('sku', si);
            if (x) {
                x.set('isEditing', true);
                this.set('searchItem', '');
            }
        }
    },
});

// controllers/item.js
export default Ember.ObjectController.extend({
    isEditing: false,
    actions: {
        editItem: function () {
            this.set('isEditing', true);
        },
        acceptChanges: function () {
            this.set('isEditing', false);
            this.get('model').save();
        }
    }
});
于 2014-02-25T08:26:26.530 回答