【问题标题】:emberjs get all form fields / values at onceemberjs 一次获取所有表单字段/值
【发布时间】:2015-03-17 14:05:03
【问题描述】:

在 ember.js 中创建新的表单字段时,似乎有一个多步骤的过程。例如,我创建表单字段:

{{input value=email type="email" placeholder="Email" required="required"}}
{{input value=password type="password" placeholder="Password" required="required"}}

然后在我的控制器中我有这个:

App.AccountController = Ember.ObjectController.extend({
    email: null,
    password: null,
    actions: {
      login: function() {
        var data = this.getProperties("email", "password");

            console.log(data);
      }
    }
});

如您所见,电子邮件和密码在顶部定义为 null,然后在用户填写字段时再次在 data var 中获取“值”。

有没有办法解决这个问题,我可以简单地说...取表单字段中的所有值,分配给 null,然后在一行中获取所有表单字段值?可能类似于 jQuery 中的序列化表单?

【问题讨论】:

  • 为了澄清,您是否正在寻找一种无需明确列出每个字段即可获取所有表单值的方法?
  • 是的没错,好像在我创建完表单域之后,我不应该把它定义为null,然后再去获取属性。
  • 你甚至可以在不指定控制器的情况下逃脱,你可以在路由模型中设置为'currentUser',登录操作(也在路由中)只需传递this.get('currentUser'),它将包含每个表单值
  • @licancabur 你能提供一个简单的例子吗? (在代码中)
  • 看起来像这样(在咖啡脚本中):gist.github.com/anonymous/1d3814bd45fc1a6fc56a。在我当前的项目中,我没有根据需要提供值。如果您使用 Ember-data,我不知道这是否是推荐的方式。

标签: javascript forms ember.js


【解决方案1】:

简短的回答是你需要重复。长答案是您可以避免重复,但代价是不值得的。

首先,您不必在控制器中定义字段。这两行可以完全删除:

email: null,
password: null,

但是,我强烈建议将它们保留用于文档目的。 (虽然它们是不必要的。)

其次,您必须意识到 Ember 没有“形式”的概念。您没有指定任何形式,只是两个输入框。如果您愿意,您可能可以构建一个表单组件来完全按照您的意愿进行操作,但我只建议您构建 lot 的表单。最后,你会有相当多的重复。

话虽如此,我认为您编写代码的方式是完美的。不要寻找写代码的最短途径;寻找最易读的方式来编写代码。您当前拥有的代码是该代码最易读的版本(在我看来)。


编辑:我没有注意到 ObjectController 正在被使用。如果未在控制器上显式设置字段,则将 get 和 set 调用转发到控制器的内容。这意味着删除这两行将不起作用。但是,如果您从 Controller 扩展而不是 ObjectController(无论如何都已弃用),它将起作用。

【讨论】:

  • 感谢您的建议。当我取出空值时,我得到了这个错误:错误:属性设置失败:路径“电子邮件”中的对象无法找到或被破坏。
  • 啊,这可能是因为您使用的是ObjectController 而不仅仅是普通的ControllerObjectController's are deprecated, you should probably extend from Controller` 代替。这将解决这个问题。
  • 我通常不使用.getProperties,而是将输入绑定到一个对象,然后在操作中我可以在那里与之交互。这适用于 ember 数据,您可以将输入绑定到模型并在操作中调用 save()。还可以考虑为您的输入使用一个组件,因为您还可以绑定到从对象返回的错误。
猜你喜欢
  • 2021-04-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-03-28
  • 2012-07-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多