1

次のような ember.js モデルとコントローラーのセットアップがあります。

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

});

次のビューを使用します。

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

対応するアイテムを警告するクリックアクションで注文のリストを出力します。これはうまくいきます。

私がやりたいことは、クリックされたアイテムを別のビューに表示することです。最終的には、注文の詳細が表示されたフローティング ダイアログを作成することを目標としています。私は残り火が初めてで、これをどのように実装すべきかわかりません。クリックされた注文を警告する機能selectItemがありますが、これを別のビューにリンクして注文の詳細を印刷する必要があります。

選択したアイテムを対応するビューを持つ別のコントローラーに保存し、selectItemクリックしたときにこれを更新する必要がありますか? または、ordersController から別のビューを更新できますか? どんなアドバイスでも大歓迎です。

4

1 に答える 1

0

ルーターを使用すると、ember がクラスのインスタンス化を行います。ルートを指定すると、"orders"呼び出されたテンプレートが検索され、見つからない場合ordersは呼び出されたコントローラーOrdersControllerが生成されます。（わかりやすくするためにコントローラーは省略しました）。json ソースからモデルをロードするには、ember-data を見ることができます。

ここにjsfiddleがあるので、少しいじることができます。

これらは途中で本当に役立つ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
    },    
});

HBS:

<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>
于 2013-01-24T11:16:26.963 に答える