Question

这必须是一个简单的概念，但它似乎是假设而不是涵盖...... 我有一个简单的模型，日记和组件，journal-list：

<select class="form-control" id="journal" onchange={{action 'showJournal' value="target.value"}} >
<option value="" disabled="disabled" selected="selected">Periodicals:</option>
  {{#each model as |journal|}}
    <option value="{{journal}}"> {{journal.name}}</option> 
  {{/each}}
</select>

和行动：

import Ember from 'ember';
export default Ember.Component.extend({
    editstate: Ember.inject.service('edit-state'),
    actions: {
        showJournal(journal) {
            this.get('editstate').selectedJournal = journal;
            alert('got ' + journal.name);
            this.sendAction('displayJournal', journal);
        }
    }
});

据我所知，所选择的值并非有用，而且行动中的日记实例也不是。 Ember知道它的类型Journal（例如<em-journalapp@model:journal::ember385:3>），但我无法通过例如journal.name，journal.get（＆＃39; name＆＃39;）或我想到的任何其他事情。

我可以通过journal.id来查看它。但是，如果我从商店查看模型，该变量再次没用。

在变量中投射或存储模型数据并将其恢复出去是否有一些魔力？

Answer 1

我会鼓励您使用ember-power-select addon。

当您说<option value="{{journal}}">这将以html（如<option value="[object object]">）呈现时，您无法存储html属性的对象。因此，您需要包含id这样<option value={{journal.id}}>，您可以通过选项列表中的findBy方法获取所选对象。

Created this twiddle。

application.hbs

<select class="form-control" id="journal" onchange={{action 'showJournal' value="target.value"}} >
<option value="" disabled="disabled" selected={{unless editState.selectedJournal.id 'selected'}}>Periodicals:</option>
  {{#each model as |journal|}}
    <option value={{journal.id}} selected={{if (eq editState.selectedJournal.id journal.id) 'selected'}}> {{journal.name}}</option> 
  {{/each}}
</select>

application.js路由文件，

import Ember from 'ember';
export default Ember.Route.extend({
  model(){
    return [{id:'1',name:'BBC'},{id:'2',name:'TV'}];
  }
});

application.js控制器文件，

import Ember from 'ember';
export default Ember.Controller.extend({
  editState: Ember.inject.service(),
  appName: 'Ember Twiddle',
 actions: {
        showJournal(journalId) {                        
            this.set('editState.selectedJournal',this.get('model').findBy('id',journalId));
          console.log('Yes ',this.get('editState.selectedJournal'));
        }
    }
});

因为你维持状态是服务所以我也做了。 edit-state.js服务文件

import Ember from 'ember';
export default Ember.Service.extend({
  selectedJournal:{},
});

访问模型数据成员的行动？需要演员？

1 个答案: