Emberjs和Rails has_many和belongs_to

Question

I new to ember, If I use the below code it shows nothing.

My order_controller.js

Office.OrderController = Ember.Controller.extend({

});

My customer.handlebars

 {{#each order in orders}}
                    <tr>
                        <td></td>
                        <td>{{order.mode}}</td>
 {{/each}}

My customer_route.js

Office.CustomerRoute = Ember.Route.extend({
    model: function(params) {
        return Office.Customer.find(params.customer_id);
    },
    setupController: function(controller, model) {
        controller.set('content', model);
    }
});

My model is(order.js)

Office.Order = DS.Model.extend({
    mode: DS.attr('string'),
    price: DS.attr('float'),

});

My serializer is order_single_serializer.rb

class OrderSingleSerializer < ActiveModel::Serializer
  attributes :mode, :price
  embed :ids, include: true
end

Answer 1

Rather than nitpicking your example, here is a simple example I got working with DS.FixtureAdapter . Assuming your response follows conventions it should work for you as well after switching the adapter to DS.RESTAdapter .

Office = Em.Application.create();

Office.Store = DS.Store.extend({
  adapter: "DS.FixtureAdapter"
});

Office.Router.map(function() {
  this.resource("customers", function() {
    this.resource("customer", { path: ":customer_id" });
  });
});

Office.IndexRoute = Em.Route.extend({
  redirect: function() {
    this.transitionTo("customers");
  }
});

Office.CustomersRoute = Em.Route.extend({
  model: function() {
    return Office.Customer.find();
  }
});

Office.OrdersRoute = Em.Route.extend({
  model: function() {
    return Office.Order.find();
  }
});

Office.Customer = DS.Model.extend({
  name: DS.attr("string"),
  orders: DS.hasMany("Office.Order")
});

Office.Order = DS.Model.extend({
  mode: DS.attr("string"),
  price: DS.attr("number")
});

Office.Customer.FIXTURES = [{
  id: 1,
  name: "Stan Smith",
  orders: [1, 2]
}, {
  id: 2,
  name: "Brian Griffin",
  orders: [3, 4, 5]
}];

Office.Order.FIXTURES = [{
  id: 1,
  mode: "abcd",
  price: 12.34
}, {
  id: 2,
  mode: "efgh",
  price: 15.99
}, {
  id: 3,
  mode: "ijkl",
  price: 1.99
}, {
  id: 4,
  mode: "mnop",
  price: 3.49
}, {
  id: 5,
  mode: "qrst",
  price: 9.99
}];

The templates:

<script type="text/x-handlebars">
  {{outlet}}
</script>

<script type="text/x-handlebars" id="customers">
  {{#each model}}
  <div>
    {{#linkTo "customer" this}}
      {{name}}
    {{/linkTo}}
  </div>
  {{/each}}
  <hr>
  {{outlet}}
</script>

<script type="text/x-handlebars" id="customer">
  <h2>{{name}}</h2>

  <p>Has {{orders.length}} orders</p>
  {{render "orders" orders}}
</script>

<script type="text/x-handlebars" id="orders">
  <h3>Orders</h3>
  {{#each model}}
    <div>{{mode}} - {{price}}</div>
  {{/each}}
</script>