Emberjs和鐵軌has_many和belongs_to

Question

我新來的燼，如果我使用下面的代碼，它什麼都不顯示。

我order_controller.js

Office.OrderController = Ember.Controller.extend({ 

}); 

我customer.handlebars

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

我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); 
    } 
}); 

我的模型是（order.js）

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

}); 

我的串行是order_single_serializer.rb

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

Answer 1

而不是挑剔你的例子，這裏是一個簡單的例子，我買了DS.FixtureAdapter工作。假設您的響應遵循慣例，在將適配器切換到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 
}]; 

模板：

<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>