Emberjs：从子视图中解析表单数据答案

【问题标题】：Emberjs: Resolve form data from child viewsEmberjs：从子视图中解析表单数据
【发布时间】：2013-06-22 12:15:17
【问题描述】：

我有一个 OutputsFormView，它应该为按钮上的单击事件提供一个保存和取消处理程序。单击保存按钮时，它应该从子视图中收集所有值并将其发送到控制器，然后控制器将其持久化。

outputs.js

App.OutputsCreateRoute = Ember.Route.extend({
    model: function() {
        return App.Output.createRecord();
    },
    renderTemplate: function() {
        return this.render('outputs/form', {
            controller: 'outputsCreate'
        });
    }
});

App.OutputsCreateController = Ember.Controller.extend({
    save: function(model) {
        // outputs empty values for title, receiver, value
        console.log(model);
    }
});

App.OutputsFormView = Ember.View.extend({
    tagName: 'form',
    classNames: ['form', 'form-horizontal'],

    save: function(e) {
        this.get('controller').send('save', {
            title: this.get('title'),
            receiver: this.get('receiver'),
            value: this.get('value')
        });
    },
    cancel: function(e) {

        console.log('canceling');
    }
});

模板

<script type="text/x-handlebars" data-template-name="outputs/form">
  {{#view App.OutputsFormView}}
    <legend class="text-right">create a new output</legend>
    <fieldset>
      <div class="control-group">
        <label class="control-label" for="title">Title</label>
        <div class="controls">
          {{view Ember.TextField valueBinding="view.title" placeholder="Lovely Afternoon Pizza"}}
        </div> 
      </div>
      <div class="control-group">
        <label class="control-label" for="receiver">Receiver</label>
        <div class="controls">
          {{view Ember.TextField valueBinding="view.receiver" placeholder="The Goverment"}}
        </div> 
      </div>
      <div class="control-group">
        <label class="control-label" for="value">Receiver</label>
        <div class="controls">
          {{view App.ValueView valueBinding="view.value"}}
        </div> 
      </div>
      <div class="control-group pull-right">
        <div class="controls">
          <button type="button" {{action "save"}} class="btn">save</button>
          <button type="button" {{action "cancel"}} class="btn btn-red">cancel</button>
        </div>
      </div>
    </fieldset>
  {{/view}}
</script>

由于某种原因，我无法获取子表单视图的值，不幸的是我不知道我忘记了什么......

博多

【问题讨论】：

标签： javascript view ember.js

【解决方案1】：

解决办法是在控制器中每一个valueBinding可用：

App.OutputsCreateController = Ember.Controller.extend({
    save: function(model) {
        var output = this.get('model');

        output.set('title', this.get('title'));
        output.set('receiver', this.get('receiver'));
        output.set('value', this.get('value'));

        output.save();
    }
});

这比直接从视图中解析值要好。但是如果你想这样做，你可以给你的视图一个名字：

{{view viewName="blabla"}}

然后通过父视图访问它：

this.get('blabla');

不过我觉得应该首选值绑定方式

【讨论】：