Question

我有一个简单的示例应用程序我正在努力学习Ember + Ember数据。如果我在模型中建立我的关系，我认为第一方Ember.Select对象将管理关系，但我收到错误。

对于选择内容（选项），我使用在本地/当前控制器上设置的数组（为排序计算），在路径的setupController方法中填充它，然后使用模型的关系属性作为选择属性Ember.Select。

它会在“新建”路径的加载时抛出错误，但如果关系数据已经存在，则会在“编辑”上运行...但在选择空值/空值时会产生错误（随'prompt'属性提供。）

这应该有用吗？或者这不是Ember + Ember数据方式？

新的错误：

Uncaught Error: Assertion Failed: The content property of DS.PromiseArray should be set before modifying it

选择提示/空值时编辑错误：

Uncaught TypeError: Cannot read property 'constructor' of undefined

router.js

Router.map(function() {
    this.resource('menu-items', function(){
        this.route('new');
        this.resource('menu-item', { path: '/:menu-item_id' }, function() {
            this.route('edit');
        });
    });

    this.resource('food-groups', function(){
        this.route('new');
        this.resource('food-group', { path: '/:food-group_id' }, function() {
            this.route('edit');
        });
    });
});

模型/菜单item.js

export default DS.Model.extend({
    title: DS.attr('string'),
    description: DS.attr('string'),
    foodGroups: DS.hasMany('food-group', { 'async': true })
});

模型/食品group.js

export default DS.Model.extend({
    title: DS.attr('string'),
    description: DS.attr('string'),
    menuItems: DS.hasMany('menu-item')
});

路由/菜单项/ new.js

export default Ember.Route.extend({
  model: function(){
    return this.store.createRecord('menu-item');
  },

  setupController: function (controller, model) {
    this._super(controller, model);

    controller.set('foodGroupsAll', this.store.find('food-group'));
  }
});

控制器/菜单项/ new.js

export default Ember.ObjectController.extend({
  foodGroupsAll: Ember.A(),
  foodGroupsSorting: ['title:asc'],
  foodGroupsLookup: Ember.computed.sort('foodGroupsAll', 'foodGroupsSorting')

  // foodGroupsAllLog: function() {
  //   console.group(this.toString() + 'foodGroupsAllLog');
  //   console.log('foodGroupsAll', this.get('foodGroupsAll'));
  //   console.groupEnd();
  // }.property('foodGroupsAll'),

  // init: function() {
  //   this._super();
  //   console.group(this.toString() + ':init()');
  //   console.groupEnd();
  // }
});

模板/菜单项/ new.js

<div class="form-group">
    <label for="input-food-groups" class="control-label">Food Group(s)</label>
    {{view Ember.Select 
        content=controller.foodGroupsLookup 
        selection=model.foodGroups 
        optionValuePath="content.id" 
        optionLabelPath="content.title" 
        prompt="Choose Food Group" 
        multiple="true" 
        class="form-control" 
        id="input-food-groups"}}
</div>

<dl>
    <dt>controller.foodGroupsLookup.length</dt>
        <dd>{{controller.foodGroupsLookup.length}}</dd>
    <dt>model.foodGroups.length</dt>
        <dd>{{model.foodGroups.length}}</dd>
</dl>

{{log ''}}
{{log 'NEW-FORM'}}
{{log 'form:foodGroupsLookup' foodGroupsLookup}}

使用：

DEBUG: -------------------------------
DEBUG: Ember      : 1.5.1 
DEBUG: Ember Data : 1.0.0-beta.8.2a68c63a
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery     : 1.11.1
DEBUG: -------------------------------

Answer 1

最后想出了这个。它是当前Ember.Select的已知问题，具有多个指定的模型和具有异步关系的模型：

问题＃2111：Ember.Select with multiple=true not working with async properties

现在的修复，直到他们重构或释放一个单独的选择组件，是在选择属性中使用关系的内容属性。

乔在Ember讨论小组上为我清楚地阐述了解决方案：

Rel ==关系，在你的情况下，它将是foodGroups.content。

在ember数据中，相关记录存储在ManyArray中，它代理数组并执行一些ED魔术。声明aysnc：true时，ManyArray再次包装在PromiseProxy中。选择视图似乎与PromiseProxies不太匹配。

我的工作选择现在是：

{{view Ember.Select 
    content=controller.foodGroupsLookup 
    selection=model.foodGroups.content 
    optionValuePath="content.id" 
    optionLabelPath="content.title" 
    prompt="Choose Food Group" 
    multiple="true" 
    class="form-control" 
    id="input-food-groups"}}

Ember Data + Ember.Select - 自动还是手动？

1 个答案: