jeudi 30 avril 2015

Getting proper data model when rendering into outlet in Ember

I am trying to create a select box in a modal that has a list of all cars in inventory. If I enter the app from a page that has all the data loaded and open the modal it works correctly. However if I am on a route that doesn't have the data loaded, then open the modal the select options do not show. Furthermore the options will never update from that point. How do I get the proper model data to load? Please be easy on me, I have less than a year of programming experience, and thanks for the help.

Dms.SellDialogController = Ember.ArrayController.extend({
  cars: function() {
    return this.store.find('car').filterProperty('isSold', false);
  }.property('model'),
  selectedCar: '',
  carObjects: function() {
    var cars = this.get('cars').map(function(car) {
      return obj = {id: car.get('id'), key: car.get('keyNumber'), label: 'KEY#:'+car.get('keyNumber') + ' - STOCK#:' + car.get('stock')+' '+car.get('year')+' '+car.get('vModel')};
    });
    cars.sort(function(a, b){return a.key-b.key;})
    return cars;
  }.property('route'),
  title: 'Select the car you are selling'
});

ApplicationRoute... ...

openModal: function(modalName, model) {
  this.render(modalName, {
    into: 'application',
    outlet: 'modal',
    model: model
  });
},

Action to open modal inside application template

{{action 'openModal' 'sellDialog' model}}

and the templates

<script type="text/x-handlebars" id="components/modal-dialog">
  <div class='modal-overlay' {{action "closeModal" target=cntrllr}}>
    <div class='modal' {{action "dngn" target=cntrllr bubbles=false}}>
      <div class='modal-content'>
        <div class='modal-header'>
          <button type="button" class="close" aria-label="Close" {{action "closeModal" target=cntrllr}}><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">{{title}}</h4>
        </div>
        {{yield}}
      </div>
    </div>
  </div>
</script>
<script type="text/x-handlebars" data-template-name="sellDialog">
  {{#modal-dialog title=title cntrllr=controller model=model}}
    <div class="modal-body">
      <span class='pull-left'>Key Number: 
        {{view "select" content=carObjects optionValuePath="content.id" optionLabelPath="content.label" selection=selectedCar}}
      </span>
    </div>
    <div class="modal-footer">
       <button {{action "modalAction" controller "sell" selectedCar.id}}>Sell</button>
       <button {{action "closeModal"}}>Cancel</button>
    </div>
  {{/modal-dialog}}
</script>




Aucun commentaire:

Enregistrer un commentaire