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

Posted 2023-02-26

【中文标题】Emberjs：从子视图中解析表单数据

【英文标题】：Emberjs: Resolve form data from child views

【发布时间】：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>

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

博多

【参考方案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');

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