Question

尝试使用简单的应用程序学习Ember，这只是一个问卷调查。在调查问卷的第一页（localhost:4200/animal），他们从选择框中选择他们最喜欢的动物（这是我制作的一个组件，我想在其他问题上重复使用）。选择框通过RESTful API填充。

//routes/animal.js
import Ember from 'ember';
export default Ember.Route.extend({
   model(){
      return this.get('store').findAll('animal');
   }
});


//models/animal.js
export default Model.extend({
   name: attr()
});


//templates/animal.hbs
Choose your favourite animal:
{{select-box
    items=model
    selectedValue=???
}}
{{#link-to "xyz"}}Go to next question{{/link-to}}


//components/select-box/template.hbs
<select {{action 'actionOnChange' on 'change'}} class='{{class}}'>
  {{#each items as |item|}}
    <option value='{{item.id}}' selected={{eq item.id selectedValue}}>{{item.name}}</option>
  {{/each}}
</select>


//components/select-box/component.js
import Ember from 'ember';
export default Ember.Component.extend({
    selectedValue: '',

    //when load the page, prepopulate the value
    init(){
        this._super(...arguments);
        //retrieve it from somewhere?
        //this.get('selectedValue') is blank if come back to the page
    },

    actions: {
        actionOnChange(){
            //save it somewhere?  where?
            this.set('selectedValue', this.$('select').val());
        }
    }
});

如果我选择一只动物，请转到调查问卷的下一页，然后再次返回/animal页面，他们的选择将会丢失。 如何保留他们选择的价值？

我查看的所有示例都显示了animal模型中保存的值，但是在数据＆＃39;中的Ember Inspector中。 “动物”选项卡显示从API调用中检索到的所有5种不同的动物。 我应该有第二个型号吗？

感谢任何帮助。

灰烬模型和路线设置

0 个答案: