在Ember渲染到插座时获取正确的数据模型

时间:2015-04-30 14:59:32

标签: javascript ember.js ember-data

我正在尝试在模式中创建一个选择框,其中包含库存中所有汽车的列表。如果我从加载了所有数据的页面进入应用程序并打开模态,它可以正常工作。但是,如果我在一条没有加载数据的路线上,则打开选择选项不显示的模态。此外,选项永远不会从那一点更新。如何获取要加载的正确数据?不应该这样做,因为我直接从商店获取数据?

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 'openModal' 'sellDialog' model}}

和模板

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

更新2015/5/4: 我有一个黑客让它现在工作。我在应用程序路径中添加了一个cars属性,我在SellDialogController中获取它。对我来说这看起来像个错误。我会在获得一些时间后制作一个jsFiddle,并在发布错误报告之前进一步检查。

1 个答案:

答案 0 :(得分:1)

尝试在Application Route上使用setupController,因为始终会调用setupController。

import Ember from 'ember';

export default Ember.Route.extend({
  model: Ember.RSVP.hash({
    optionsForSelect: function() {
     // fetch your select data here
    },
    otherData: function() {
     // get your regular model data here
    }
  }),
  setupController: function(controller, model) {
    this.controllerFor('sellDialog').set('model', model.optionsForSelect);
     this.controller.set('model', model.otherData);
  }
});