javascript - ArrayController 中某个项目的单独 View

Question

我有一个 ember.js 模型和 Controller 设置，如下所示:

//model
App.Order = Ember.Object.extend({

  content: null,

  create: function(data) {
    this.set('content', data);
    return this._super();
  }

});

//orders controller
App.ordersController = Ember.ArrayController.create({

  content: [],

  init: function() {

        var self = this;
    var orders = [];

    $.getJSON('js/data.json', function(data) {  
        data.forEach(function(item) { 
          var order = App.Order.create(item);
          orders.push(order);
        });
      self.set('content', orders);
    });
    },

  selectItem: function(data) {
    alert(data);
  }

});

具有以下 View :

{{#each App.ordersController}} 
   <div {{action selectItem target="App.ordersController"}}>{{order_number}}</div>
{{/each}}

它会打印出订单列表，并通过单击操作来提醒相应的项目。这很好用。

我想要做的是在单独的 View 中显示单击的项目，最终目标是创建一个显示订单详细信息的 float 对话框。我是 ember 新手，不知道应该如何实现。我有一个函数 selectItem ，它会警告单击的订单，但我需要将其链接到单独的 View 并打印订单详细信息。

我是否应该将所选项目存储在具有相应 View 的单独 Controller 中，并在单击 selectItem 时更新它？或者我可以从ordersController 更新一个单独的 View 吗？非常感谢任何建议。

Answer 1

当您使用路由器时，ember 会为您实例化您的类。通过指定 "orders" 路由来查找名为 orders 的模板和名为 OrdersController 的 Controller (如果找不到)为您生成一个。 (为了清楚起见，我省略了 Controller )。要从 json 源加载模型，您可以查看 ember-data。

这是一个jsfiddle所以你可以稍微摆弄一下。

你绝对应该看看here这些是 Ember 的指南，可以真正帮助您。文档变得越来越好。 :)

JS:

window.App = App = Em.Application.create();

//model
App.Order = Ember.Object.extend({
    order_number: null,
});


//we create 2 routes one for all the order and one per specific order
App.Router.map(function(){
    this.resource('orders', { path: "/" });
    this.resource("order", { path: "/:order_id" });    
});

//the route supplies the model and handles the event to transition to a new route.    
App.OrdersRoute = Em.Route.extend({
    events: {
        selectItem: function (orderId) {
            //select the order by the "orderId" you want as a model for your new view.
            this.transitionTo("order", order);
        }
    },
    model: function(){
        return content; //an array containing the orders;
    }
});

//supplies the model for the "order" route by selecting one acording to the params;
App.OrderRoute = Em.Route.extend({
    model: function(params){
        return order; //select an object from the array according to the params
    },    
});

哈佛商学院:

<script type="text/x-handlebars" data-template-name="orders">
    {{#each controller}} 
      <!-- this calls the event handler "selectItem" on the ordersroute -->
      <div {{action "selectItem" order_number}}>{{order_number}}</div>
    {{/each}}

    <!-- this is handled by "App.OrderRoute" -->
    <a href="#/3"/>with a direct link</a>
</script>

<script type="text/x-handlebars" data-template-name="order">
    {{content.order_number}}
    {{#linkTo "orders"}}Back to orders{{/linkTo}}
</script>