Ember：点击并读取新数据动态添加输入字段 [英] Ember: Adding input fields dynamically on click and reading the new data

问题描述

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

点击此处，他可以在新的输入字段中输入问题，点击保存。所以我需要的是，当他保存时，新输入的问题也应该显示在已经显示的问题附近。

所以我在模型中有问题

 从ember-data导入DS; 
 
导出默认DS.Model.extend（{
 challengeQuestions：DS.attr（）
}）; 
  

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

 从ember导入Ember; 
 
导出默认Ember.Controller.extend（{
 
 addQuestion：false，
 
问题：Ember.computed.alias（'model.challengeQuestions' ），
 
操作：{
 postAnswer：function（）{
 alert（'准备帖子数据'）; 
}，
 
 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 =输入你的问题value = newQuestion}} 
< br> 
< button {{actionsaveQuestion}}>保存< / button> < button {{actioncancel}}> cancel< / button> 
 {{else}} 
< button {{action'addQuestion'}}>添加手册问题< / button> 
 {{/ if}} 
 
< br>< br> 
< button {{action'postAnswer'}}>提交< / button> 
  

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

我可以看到新的字符串被成功添加，但它不会显示在UI上。任何想法为什么？

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

谢谢

解决方案

原来很简单..

而不是

  this.get（'questions'）。push（que）; 
  

我不得不写

  this.get（ '问题'）pushObject（阙）。 
  

谢谢。

I have a page where i show user couple of questions and provide input field for answers. Also i have a button add a question.

On clicking this, he can enter a question in the new input field and click save. so what i need is that, when he save, the newly entered question should also show up near the already shown questions.

So i have the questions in the model

import DS from 'ember-data';

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

Then i alias this in my controller and show the two questions from the template.

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);
     }
   }
});

And below goes my template..

{{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>

So what i am trying to do here is that, when i add a new question and click on save button, i push the entered question string to the questions array in my controller. And i was expecting that the template would re-render since it is modified.

I can see that the new string is being successfully added but it doesnt show up on the UI. Any idea why?

Am using latest ember(1.13) and ember-cli.

Thanks

解决方案

It turned out be pretty easy..

Instead of

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

i had to write

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

Thanks.

这篇关于Ember：点击并读取新数据动态添加输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！