Question

前一天我开始研究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);


           }
          });

每当我点击提交按钮时，我都会在alert中获得未定义。如何获得价值？我希望有人能帮助我继续参加ember.js

Answer 1

在这样的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>

Answer 2

您的问题是您的表单没有型号。您可以使用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>

Here a live demo

Answer 3

这是 mavilein非常好的教程。

我们也可以在控制器级别进行。

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);


       }
});

或者我们可以做到

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


       }
      });

Answer 4

下面的代码对我有用：

cshtml：在标签上的脚本中指定data-template-name =＆＃34; text＆＃34;

   <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>

<强> app.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');
    }
}
});

如何在ember.js中获取文本框值

4 个答案: