如何从ember复选框获取表单数据

时间:2014-01-09 15:26:59

标签: checkbox ember.js

我有一个包含两个模型{1}}和user的余烬应用程序。每个用户都有许多与之相关的主题。我有一个用户/创建模板,您可以在其中输入新的用户详细信息,即他们的姓名,电子邮件地址和相关主题。从主题控制器中的主题驱动的复选框值列表中选择主题。我的问题是当我点击保存时,控制器似乎跳过主题选择并且不将它们添加到JSON有效负载。有人可以帮忙吗?

创建模板:

subject

UserCreateView:

<script type = "text/x-handlebars" id = "user/create">
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">New User</h4>
      </div>
      <div class="modal-body">
<div class = "input-group">
<form>

  <h5>First Name</h5>
  {{input value=firstName}}

  <h5>Last Name</h5>
  {{input value=lastName}}

  <h5>Email</h5>
  {{input value=email}}

  <h5>Subjects</h5>

{{#each subject in subjects}}
  <label>
        {{view Ember.Checkbox Binding="id"}}
        {{subject.name}}
    </label><br />
{{/each}}

</form>
</div>
      </div>
      <div class="modal-footer">

        <a {{action close target="view"}} href="#" class="btn btn-default">Cancel</a>
        <a  data-dismiss="modal" {{action "save"}} class="btn btn-primary">Save changes</a>

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</script>

CreateController:

App.UserCreateView = Ember.View.extend({
  didInsertElement:function(){
    $('#createModal').modal('show');
    var self = this;
    $('#createModal').on('hidden.bs.modal', function (e) {
  self.controller.transitionToRoute("users");
});
  },
  actions:{
    close:function(){
      this.$(".close").click();

    },
    save: function(){
        alert('(in view) saved in view');
      this.controller.send("save");
      self.controller.transitionToRoute("users");
      this.$(".close").click();
      $('#createModal').modal('hide');

    }
  },
)};

1 个答案:

答案 0 :(得分:2)

我要看的第一件事是您在复选框上使用的绑定属性。对于 -checkbox或{{input}},您可以通过value属性进行绑定。 但是 - 对于复选框,您必须绑定“已检查”属性。

查看http://emberjs.com/guides/templates/input-helpers/ - 大约在Checkboxes下方的中途获取更多信息,它将显示已接受的属性等。

我遇到了同样的问题:

{{input  type="checkbox" class="input-small" id="inputCache" value=cache}}

关于将checkbox-values传递给处理提交的操作(其他值传入并保持正常),而只是将属性更改为:

{{input  type="checkbox" class="input-small" id="inputCache" checked=cache}}

解决了整个问题。

希望这可以解决问题。祝你好运: - )