Question

我有一个页面，我向用户显示几个问题，并提供输入字段的答案。我还有一个按钮添加问题。

单击此按钮，他可以在新输入字段中输入问题，然后单击“保存”。所以我需要的是，当他保存时，新输入的问题也应该出现在已经显示的问题附近。

所以我在模型中有问题

import DS from 'ember-data';

export default  DS.Model.extend({
  challengeQuestions: DS.attr()
});

然后我在控制器中对此进行别名，并显示模板中的两个问题。

import Ember from "ember";

export default Ember.Controller.extend({

   addQuestion : false,

   questions : Ember.computed.alias('model.challengeQuestions'),

   actions : {
     postAnswer: function(){
        alert('prepare post data');
     },

     addQuestion: function(){
       this.set('addQuestion', true);
     },

     saveQuestion: function() {
       var que = this.get('newQuestion');
       this.get('questions').push(que);
       this.send('cancel');
     },

     cancel: function(){
       this.set('addQuestion', false);
     }
   }
});

以下是我的模板..

{{log questions}}
{{#each question in questions}}
    <div>
        <span>{{question}} : </span>
        {{input placeholder="your answer"}}
    </div>
{{/each}}


<br><br>
{{#if addQuestion}}
    {{input placeholder="Enter your question" value=newQuestion}}
    <br>
    <button {{action "saveQuestion"}}>Save</button> <button {{action      "cancel"}}>cancel</button>
{{else}}
    <button {{action 'addQuestion'}}>Add manual Question</button>
{{/if}}

<br><br>
<button {{action 'postAnswer'}}>Submit</button>

所以我在这里尝试的是，当我添加一个新问题并单击“保存”按钮时，我将输入的问题字符串推送到控制器中的问题数组。而且我期待模板会因为它被修改而重新渲染。

我可以看到新字符串已成功添加，但它没有显示在UI上。知道为什么吗？

使用最新的余烬（1.13）和ember-cli。

由于

Answer 1

结果很简单..

而不是

this.get('questions').push(que);

我必须写

this.get('questions').pushObject(que);

感谢。

Answer 2

您对别名属性使用了错误的名称，请使用：

questions: Ember.computed.alias('model.securityQuestions')

而不是：

questions: Ember.computed.alias('model.challengeQuestions')

因为model.challengeQuestions是undefined。

Ember：在点击和读取新数据时动态添加输入字段

2 个答案: