以动态生成的形式结合灰烬模型



我正在从过去几周中学习ember js,并构建了一个学习它的应用程序。我处于必须建立一个动态形式的情况下,该形式将与Ember模型结合。(此问题的最简单示例可以是嵌套的表单,我们可以单击添加更多链接/按钮以开展的添加表单,并向它们添加值(。

但对我来说,我正在建立像网站这样的调查,我们可以选择很多选项,用户可以从可用的选项中选择其中一个:

我到目前为止所做的?

readAnswer: Ember.computed(function() {
    return this.get('store').query('answer', { filter:
      {
        question_id: this.get('question.id'),
        submission_id: this.get('submission.id')
      }
    })
  }),
  buildAnswer: Ember.computed(function() {
    this.get('store').createRecord('answer', {
      question: this.get('question'),
      submission: this.get('submission')
    })
  }),
  answer: Ember.computed(function() {
    const ans = this.get('readAnswer');
    console.log(`question_id: ${this.get('question.id')}, submission_id:     ${this.get('submission.id')}`);
    if(Ember.isEmpty(ans)) {
      return this.get('buildAnswer');
    } else {
      return ans;
    }
  })

answer.hbs

<div class="row col-sm-12">
  <div class="form-group">
    <label>{{model.title}}</label>
    <p>
      {{input type="text" value=answer.field01 class="form-control" placeholder="width"}}
    </p>
    <p>
      {{input type="text" value=answer.field02 class="form-control" placeholder="depth"}}
    </p>
  </div>
</div>

NOTE 在此处答案。HBS是一个组件,这些组件是从父路由递归(以循环为单位(的。因此,对于2个问题,我们可以有4个文本框,每个问题的2个文本框,第一个fornd.field01的文本框,第二个文本框和第二个文本框。

假设我有2个问题,到目前为止,如果数据库中还不存在,我可以看到在Ember Store中构建的2个答案,然后我可以看到在查看中生成的4个文本框。但是它们没有约束力。意思是,如果我可以重视文本框,则在Ember Store中什么也不会发生。

预期结果

当我在文本框中输入答案时,它应该与answer.fieldxx绑定。

我从 computed propertyinit()函数提取了这些代码,现在一切都起作用:

  answer: null,
  init() {
    this._super(...arguments);
    // build without computed property
    this.get('store').query('answer', { filter:
      {
        question_id   : this.get('question.id'),
        submission_id : this.get('submission.id')
      }
    }).then((answers) => {
      if(Ember.isEmpty(answers)) {
        let a = this.get('store').createRecord('answer', {
          question   : this.get('question'),
          submission : this.get('submission')
        })
        this.set('answer', a); // build new object and set answer
      } else {
        this.set('answer', answers.get('firstObject')); // get first answer and build it (because it is always 1 record)
      }
    }, (reason) => {
      console.log(reason);
    });
  },

相关内容

  • 没有找到相关文章

最新更新