Ember.js：如何表示一个很多的模型关系？ [英] Ember.js: How to represent a has-many model relationship?

问题描述

我正在尝试设置一个Ember应用程序，其中有很多项目，所有这些都有很多选项。然后我需要一个仪表板区域，我可以监视所有项目/选项的信息。

I am trying to set up an ember app where I have many Items, all of which have many Options. I then need a 'dashboard' area where I can monitor information on all Items/Options.

在上一篇文章我收到了一个监视器的工具示例单项收藏项目。

如何更新以代表每个项目的子选项？

In a previous post I got a working example of a dashboard which monitors a single collection of Items.
How do I update this to represent child Options for each Item?

Javascript - from jsBin（updated）

App = Ember.Application.create();

/* ROUTES */
App.Router.map(function() {
  this.resource('items');
  this.resource('dashboard');
});
App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('items');
  }
});
App.ItemsRoute = Ember.Route.extend({
  model: function() {
    var a = Em.A();
    a.pushObject( App.Items.create({title: 'A', cost: '100'}));
    a.pushObject( App.Items.create({title: 'B', cost: '200'}));
    a.pushObject( App.Items.create({title: 'C', cost: '300'}));
    return a;
  }
});

/* MODELS */
App.Items = Ember.Object.extend({
  title: '',
  cost: '',
  quantity: ''
});


/* CONTROLLERS */
App.ItemsController = Ember.ArrayController.extend({
  legend: 'test',
  len: function(){
    return this.get('length');
  }.property('length'),
  totalCost: function() {
    return this.reduce( function(prevCost, cost){
      return parseInt(cost.get('cost'),10) + (prevCost || 0);
    });
  }.property('@each.cost')
});
App.DashboardController = Em.Controller.extend({
  needs: ['items'],
  itemsLength: Ember.computed.alias('controllers.items.len'),
  itemsTotalCost: Ember.computed.alias('controllers.items.totalCost')  
});

Handlebars

 <script type="text/x-handlebars" data-template-name="application">
  <p><strong>Ember.js example</strong><br>Using an a dashboard that monitors 'items'.</p>
    {{render dashboard}}
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="items">
    <h2>Items:</h2>
    <dl>
      {{#each}}
        <dt>Title: {{title}}</dt>
        <dd>Cost: {{cost}} {{input value=cost}}</dd>
      {{/each}}
    </dl>
  </script>

  <script type="text/x-handlebars" data-template-name="dashboard">
    <h2>Overview:</h2>
    {{#if controllers.items}}
    <p>Total number of items (expect 3): {{itemsLength}}<br>
    Total cost of items (expect 600): {{itemsTotalCost}}</p>
    {{/if}}
  </script>

推荐答案

在前期，我建议使用客户端记录管理框架像ember数据/ ember模型，他们是一个学习曲线，但从长远来看非常棒。如果您不想这样做，您可以按照您已经建立的模式创建模型。

Upfront, I would recommend using a clientside record management framework like ember data/ember model, they are a bit of a learning curve, but very awesome in the long run. If you don't want to do that, you can follow the same pattern you've already established with creating models.

http://jsbin.com/IpEfOwA/3/edit

这篇关于Ember.js：如何表示一个很多的模型关系？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！