5

就在前一天，我开始研究 ember.js。我不知道如何在提交时获取文本框值。我试过这样

这是html

    <script type="text/x-handlebars" data-template-name="index">
    <div >
     <p>{{view Ember.TextField valueBinding="fname"}}</p>
    </div>
    <div>
    <p>{{view Ember.TextField valueBinding="lname"}}</p>
    </div>
    <button {{action save}}>submit</button>
    </script>

这是我的 ember.js 文件

          App = Ember.Application.create();
          App.IndexController = Ember.ObjectController.extend({

           save:function()
           {
              var fname=this.get('fname');
              var lname=this.get('lname');
              alert(fname+','+lname);


           }
          });

每当我单击提交按钮时，我都会在警报中未定义。那么如何获得价值？我希望有人能帮助我继续使用 ember.js

4

4 回答 4

10

在这样的js中

App.WebFormController = Ember.Controller.extend({
    fname: null,
    lname: null,
    save: function () {
        var fname = this.get('fname');
        var lname = this.get('lname');
        alert(fname + ',' + lname);
    }
});

无需模型

在这样的模板中

<script type="text/x-handlebars" data-template-name="web_form">
    <form {{action save on="submit"}}>
        <div >
            <p>{{input type="text" valueBinding="fname"}}</p>
        </div>
        <div>
            <p>{{input type="text" valueBinding="lname"}}</p>
        </div>
        <button>submit</button>
    </form>
</script>
于 2013-12-17T09:57:51.573 回答
3

您的问题是您的表单没有模型。您可以使用model或setupController钩子提供它。

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {};
  },
  // or
  setupController: function(controller) {
    controller.set('model', {});
  }
});

另外一些提示：

action name on="submit"在表单中使用，而不是action name在提交按钮中。因此，当用户在输入中按下回车键时，您可以执行该操作。

input type="text"助手是一个快捷方式view Ember.TextField

<script type="text/x-handlebars" data-template-name="index">
    <form {{action save on="submit"}}>
        <div >
            <p>{{input type="text" valueBinding="fname"}}</p>
        </div>
        <div>
            <p>{{input type="text" valueBinding="lname"}}</p>
        </div>
        <button>submit</button>
    <form>
</script>

这里有一个现场演示

于 2013-08-20T14:36:27.420 回答
2

That is really nice tutorial by mavilein.

We can do it at controller level also.

App.IndexController = Ember.ObjectController.extend({
        content:function(){
           return {fname:null,lname:null}
           }.property(),
       save:function()
       {
          var fname=this.get('fname');
          var lname=this.get('lname');
          alert(fname+','+lname);


       }
});

Or we can do it

App.IndexController = Ember.ObjectController.extend({
       fname:null,
       lname:null,
       save:function()
       {
          var fname=this.get('fname');
          var lname=this.get('lname');
          alert(fname+','+lname);


       }
      });
于 2013-08-20T14:39:39.193 回答
1

下面的代码对我有用：

cshtml：在标签上的脚本中指定 data-template-name="text"

   <script type="text/x-handlebars" data-template-name="text">
   {{view Ember.TextField value=view.message}}
   {{view Ember.TextField value=view.specy}}
   {{textarea value=view.desc id="catdesc" valueBinding="categor" cols="20" rows="6"}}

   <button type="submit" {{action "submit" target=view}}>Done</button>
   </script>

应用程序.js：

App.TextView = Ember.View.extend({
templateName: 'text',
message:'',
specy: '',
desc:'',
actions: {
    submit: function (event) {
        var value = this.get('specy');
        var spc = this.get('message');
        var de = this.get('desc');
    }
}
});
于 2014-11-06T10:13:20.413 回答