Ember:点击时动态添加输入字段并读取新数据

2024-01-10

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

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

所以我对模型有疑问

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>

所以我在这里想做的是,当我添加新问题并单击“保存”按钮时,我将输入的问题字符串推送到问题我的控制器中的数组。我预计模板会重新渲染,因为它被修改了。

我可以看到新字符串已成功添加,但它没有显示在用户界面上。知道为什么吗?

我正在使用最新的 ember(1.13) 和 ember-cli。

Thanks


事实证明这很容易..

代替

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

我必须写

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

Thanks.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Ember:点击时动态添加输入字段并读取新数据 的相关文章

  • 恢复对 ember 数据模型的更改

    有没有办法轻松恢复对 Ember 数据模型的更改 我有一个绑定到编辑视图的模型 此视图使用户能够取消编辑 此时我想恢复对模型的更改 有没有一种简单的方法可以做到这一点 而无需克隆所有值 从 Ember Data 版本 2 开始 不再有交易
  • 您在一次渲染中修改了 *** 两次

    升级到 1 13 后 出现此异常 但我不知道问题出在哪里 我也找不到任何有用的资源来解决我的问题 我在另一个计算属性中设置的属性会发生这种情况 但这个属性肯定只被调用一次 我创建了一个 jsbin 示例 http emberjs jsbin
  • emberjs 对一条路线使用多个路径/url

    在 Ember 中我可以使用这个 App Router map function this route accomodations 因此 如果访问 accomodations 它将加载该视图 我还可以补充 App Router map fu
  • 在 Ember 中将模型属性插入 Img 元素 URL

    我有一个模型image id财产 我有一个包含图像元素的模型视图 我需要将 id 插入图像元素的src属性来完成图像的 URL 以便我有效地执行此操作 img src 我的第一次尝试使用了 Handlebars 助手 img src 但这也
  • 将 Ember 组件附加到不受 Ember 管理的 DOM 元素

    我想附加一个 Ember 组件ComponentB到由某些非 Ember UI 库生成的 DOM 元素didInsertElement of ComponentA 导致类似的结果 div class ember view component
  • 是否可以使用脚本标签加载车把模板?或者在 Ember.js 中以编程方式定义车把模板

    很简单 我不想在 html 文件中定义所有车把模板 我试过这个 但这没有用 我是否可以不以编程方式定义模板 甚至只是加载车把文件 以便我可以重用 而且我觉得这使事情更易于维护 我尝试用 ajax 加载它们并将它们附加到头部 这工作正常 我可
  • 如何将 hashbang url 更改为历史 API

    我正在使用 ember1 0 rc3 我想将 hashbang url 更改为正常的 url 格式 即 www site com admin page1 到 www site com admin page1 更改 我在应用程序路由器中使用位
  • 找不到将 ember-cli 应用程序迁移到 TypeScript 的模块

    我想在我的 ember 项目中尝试 ts 我之前在小型应用程序上尝试过 所以我有 ember cli typify 0 3 1 typescript 2 0 3 typings 1 4 0 ember cli 2 4 3 在我的里面tsco
  • 如何在 Ember 中捕获数组是否插入到车把中?

    我希望这不是重复的问题 但我无法找到解决方案 我有工作和用户 一个用户有很多工作 JP User DS Model extend firstName DS attr string lastName DS attr string email
  • 客户端 Javascript 应用程序 - 不带哈希标签的 url 路由

    我正在使用最新版本的 Ember js 开发一个新的仅客户端应用程序 有一个 PHP 页面可以构建脚本 CSS 模板文件等 并将其全部传递到 index php 中 我使用 htaccess 指令 以便所有请求都重写到 index php
  • Ember.JS - 如何在同一页面中使用多个模型、控制器和视图?

    我主要了解 Ember JS 的基础知识 大多数示例实际上只处理单个控制器和模型以在页面上显示某些内容 我真的很想用 Ember 构建一个完整的 Web 应用程序 所以有人能告诉我如何组织和连接多个控制器 模型和视图到一个页面中吗 例如 如
  • Ember:error.messages 在保存时不显示服务器错误

    当尝试创建新记录时 errors messages不渲染为文档中描述 http emberjs com api data classes DS Errors html 也就是说 控制台确实呈现了错误Error The backend rej
  • Ember 克隆模型创造新纪录

    我想克隆当前正在编辑的模型 我发现了几种几乎有效的方法 但两者都不完美 1 model get data attributes 获取除驼峰式形式的关系之外的所有属性 生成一条新记录 但关系当然丢失了 2 model serialize 生成
  • 在路由之间传递参数

    Ember 中将参数从一个路由发送到另一个路由的 适当 方式是什么 例如 我有两条这样定义的路线 this resource activities path activities on date function this route ne
  • Ember - 如何在嵌套数据对象上使用pushObject?

    由于这篇文章 我已经可以将新对象推入 jobs 和 jobProducts 数组中如何在 Ember js 中创建嵌套模型 https stackoverflow com questions 9186214 how to create ne
  • 如何在重新渲染 Ember 视图的一部分时随时运行代码?

    我的目标是拥有一个类似 Facebook 的按钮 可以有条件地出现在 Ember 视图中 我的模板是 if condition Click Like div class fb like fb edge widget with comment
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • ember-data:如何制作正在保存/已保存的闪存消息

    为了在我的应用程序顶部制作一个黄色的 正在保存 已保存 指示符消息 我希望有一个布尔属性来指示当前是否有任何余烬数据记录正在运行 我试过这个 App store DS Store create isSaving gt for record
  • 如何在 Ember 中构建递归视图?

    在我的应用程序中 我有一个名为block它可以包含其他内容并被其他内容包含block项目 为了简单起见 我们假设这些块可以无限嵌套 我想知道是否可以创建与嵌套块相对应的递归视图 每个视图都会被渲染为DIV包含其子级并驻留在其父级内部DIV
  • ember 错误:编译错误:不是助手

    我在开发前端时遇到以下错误Ember js ember 错误 编译错误 不是助手 这个错误是什么意思 Reason 如果没有 Ember 会抛出此错误成分 or helper在您的项目或依赖的插件中找不到给定名称 怎么解决 您应该检查您编写

随机推荐

  • 如果用户从不点击警报,如何处理超时错误?

    我有一个 Google Sheets 插件 它使用 App Script Ui 服务提供的对话框 即SpreadSheetApp getUi alert 这通常工作正常 除非用户在 5 分钟内没有选择选项或关闭警报 假设他们切换到不同的选项
  • 模拟 raw_input python

    我有这个函数应该接收列表 x y def input origem origem raw input Entre com o valor de x origem eval origem return origem def input sai
  • 发生 500 错误时向管理员发送电子邮件

    在 python 中 当发生 500 错误时 如何向管理员发送电子邮件 我使用的网络框架是 bottle 只需使用 error code 装饰器来定义错误处理页面 如下所示 from bottle import run error rout
  • 如何使用按钮添加更多输入字段 - Angular 2 动态表单

    所以我在这里使用了指南 https angular io docs ts latest cookbook dynamic form html https angular io docs ts latest cookbook dynamic
  • 通过 JNI C 代码将 PNG 图像作为 BufferedImage 加载到 Java 中

    我有以下问题 我有 C 代码 它获取 PNG 图像作为基本原始数据并将其保存在内存中 我希望通过使用 JNI 将这些原始数据转换为 Java 中的 BufferedImage 有谁知道这样做的任何方法或以前做过吗 我假设您了解如何使用 JN
  • Angular Typescript getter 和 setter 返回未定义

    我有一个类 我需要该类中的属性来返回对象中的一些字段 我在 Net 中这样做过几次 但在 Angular 中 我正在与返回的 未定义 作斗争 我可以确认属性 transLanguageId transLangDesc 翻译 已填充到 IBa
  • 如何解决 VS2013 错误 SQL71501:过程 X 对程序集 Y 存在未解析的引用?

    作为从 Visual Studio 2010 升级到 2013 的努力的一部分 我正在研究几个需要的 SQL Server CLR 存储过程EXTERNAL访问 并为此目的被隔离在一个单独的程序集中 我几乎可以毫无困难地构建所有东西 但这给
  • 如何更改 Capistrano 使用的临时目录?

    如何更改 Capistrano 使用的临时目录 示例 代替 tmp 我想用 home user tmp 我目前的VPS有 tmp安装为noexec 这在尝试运行时给了我权限被拒绝的错误cap production deploy 在 卡皮斯特
  • 用于撰写 Facebook 电子邮件/消息的 URL(通过 URL 参数撰写电子邮件)

    Facebook 过去使用以下 URL 格式来撰写消息 http www facebook com compose id XXXXXX message 然而 上面的 URL 不再起作用 它只是将用户转发到 Facebook 主页 有人可以通
  • 有没有办法以编程方式确定图像链接是错误的?

    在我正在处理的网站中 显示的图像并不总是 显示 因为链接可能是坏的或过时的 或其他什么 你可以在这里看到它 为什么我的动态 HTML 看起来是随机放置的 https stackoverflow com questions 17689644
  • 在 Facebook 上分享的人员列表

    我已经搜索文档有一段时间了 但似乎找不到实现此目的的方法 这些信息是公开的 在 Facebook 页面上 链接显示 查看所有 股 但我似乎找不到通过 FQL 或图形 API 访问此信息的方法 我知道我可以获得给定帖子的点赞列表 https
  • Haskell 中“undefined”的类型签名意味着什么?

    我是 Haskell 的初学者 我对undefined函数的类型签名 我期望有更简单的东西 但我在 Hackage 上发现了这个 undefined forall r RuntimeRep forall a TYPE r HasCallSt
  • 自引用表 SQL 查询

    我有一个有四列的表格id name designation manager id 表架构 CREATE TABLE Employee Information id INTEGER PRIMARY KEY AUTOINCREMENT NOT
  • excel中的数组改变字符串的格式

    我想要分离图像中的数据 图像中的代码一旦到达分号和缩进就不会分开 我想将这些单词分离到一张新纸上 以便我将在数组中搜索某些单词 谢谢您的帮助 下面的代码不仅会分割数据 还会复制格式 这似乎是您想要的 假设数据位于 A 列 Option Ex
  • Windows Phone 8.1 API

    有 Windows Phone 8 1 API 可供参考吗 这是因为我想开发Windows Phone 8 1应用程序 但我不知道在哪里引用API 因为Windows Phone 8 1和8有很大的不同 所以我无法引用Windows Pho
  • 点击即可从 SwiftUI 小部件执行深层链接

    我有一个带有两个文本的简单小部件 中等大小 我想要的是能够执行深层链接以引导用户到我的应用程序的特定部分 但我似乎找不到一种方法这样做 我写的视图 很简单 HStack Text FIRST ITEM Spacer Text SECOND
  • liquibase <插入> :插入当前日期

    我正在尝试使用 liquibase 插入标签插入数据 当我向 value tag 输入数字时 它工作正常 但我正在寻找一个简单的函数来处理默认日期 数据库的当前日期时间 即使我没有将它作为表定义的一部分 Eg
  • 如何将 null 传递给需要 long 或 int 的方法?

    可能是个愚蠢的问题 但我怎样才能通过null到需要的方法long or int Example TestClass public void iTakeLong long id public void iTakeInt int id 现在我如
  • MicroProfile 指标在 Wildfly 25 上不显示自定义指标

    我正在尝试 Javax JaxRs 并且使用的是 WildFly 25 服务器 我对此不太熟悉 在搜索类似于 Spring 的 Actuator 的东西时 我偶然发现了服务器默认公开的指标和运行状况端点 以及它向应用程序端点添加自定义计数器
  • Ember:点击时动态添加输入字段并读取新数据

    我有一个页面 向用户展示几个问题并提供答案的输入字段 我还有一个按钮添加问题 单击此按钮后 他可以在新的输入字段中输入问题 然后单击 保存 所以我需要的是 当他保存时 新输入的问题也应该显示在已经显示的问题附近 所以我对模型有疑问 impo