CODEWITHSUNDEEP
ember.js
Diego P
Diego P

Reputation: 1758

Populate data from model into handlebar template

I have the following rout that returns a json resoponse from the server.

    myApp.VcustomersInvoiceRoute = Ember.Route.extend({
  queryParams: {
    order_id: {
      refreshModel: true
    }
  },
  model: function(params) {
    var url = 'ajax_handler/getorderdetails/' + params.order_id;

    return Ember.$.getJSON(url)
  },
   setupController: function(controller, model) {
        this._super(controller, model);
    controller.set('model', model);
  }
});

Server response:

[{"id":"1929","firstname":"Aaron","lastname":"Loeb","dayphone":"650 - 346 - 8668","email":"[email protected]","street":null,"city":null,"zipcode":null,"pickuptime":"02:00:00","pickupdate":"02:00:00","location":"4th Street","type":"Web order"}]

controller:

    myApp.VcustomersInvoiceController = Ember.ObjectController.extend({

    adding:false,
    isEditing:false,
  actions: {
        editorederdetails: function() {
            this.set('isEditing', true);

        },
        isadding: function() {
            if (this.adding){
                    this.set('adding', false)
                    $("#add").show();
                }else{
                    this.set('adding', true)
                    $("#add").hide();
                };

        },
    },
});

what I am trying to achieve is display data from this response into the template. Something like:

<script type="text/x-handlebars" data-template-name="vcustomers/invoice">

<h1>Invoice <small># {{id}}</small></h1>
<h1>Customer <small># {{lastname}}</small></h1>

Route structure:

myApp.Router.map(function() {
this.resource('vcustomers', function () {
    this.route('invoice', { path: '/invoice/:invoice_id' });
});
this.resource('vmenus');
this.resource('creport');

});

Upvotes: 1

Views: 346

Answers (1)

Daniel
Daniel

Reputation: 18682

You need to pass one object, instead of an array with one object inside, to your controller. Then you can access its properties easily. Change your setupController method to:

setupController: function(controller, model) {
  this._super(controller, model);
  controller.set('model', model.get('firstObject'));
}

And then you can access model properties using:

<h1>Invoice <small># {{model.id}}</small></h1>
<h1>Customer <small># {{model.lastname}}</small></h1>

Which produces:

Invoice # 1929

Customer # Loeb

Working demo.

Upvotes: 2

Related Questions