jquery - 如何使用 emberJS 创建登录表单？

Question

我想使用 emberjs 视图创建一个登录表单。我可以为此使用哪些控件的任何想法。

emberJS 是否支持表单控件和其他 UI 控件，例如网格、列表蚀刻。我知道它是开发框架，但是它支持的控件很少，例如 textField textArea 复选框。

也就是说，为什么它不支持面板等其他控件。

Answer 1

Davis 做对了，但是他的代码需要做一些改进。

1. Ember.Button已弃用。相反，使用button标签。
2. 在您看来，定义一个submit事件。提交表单时会触发它。无需手动设置按钮上的操作。
3. 你的观点不应该做任何$.ajax事情。将其委托给控制器。

因此，重构之后，代码将如下所示：

App = Ember.Application.create({});

App.loginController = Ember.Object.create({
    login: function(username, password) {
      // $.ajax stuff goes here
    }
});

App.LoginFormView = Ember.View.extend({
    tagName: 'form',
    username: null,
    password: null,

    submit: function(event) {
        event.preventDefault();

        var username = this.get('username');
        var password = this.get('password');

        this.get('controller').login(username, password)
    },
});

还有你的模板：

<script type="text/x-handlebars" data-template-name="login">
    {{#view App.LoginFormView}}
        <label>
          Username:
          {{view Ember.TextField valueBinding="view.username"}} 
        </label>
        <label>
          Password:
          {{view Ember.TextField type="password" valueBinding="view.password"}}
        </label>
        <button>Login</button>
    {{/view}}
</script>

编辑：经过一番思考，可能我放入控制器的所有逻辑实际上都应该进入路由器。控制器应该用于将模型连接到视图。

Answer 2

我昨天构建了一个登录表单，我假设您想构建一个异步表单。

我从查看这个gist开始，从那时起 API 发生了一些变化，但是现在看起来有点不同：

JavaScript：

App = Ember.Application.create({});

App.loginController = Ember.Object.create({
    // do login stuff
});

App.LoginFormView = Ember.View.extend({
    username: null,
    password: null,

    submitLogin: function() {
        var username = this.get('login');
        var password = this.get('password');
        console.log('Login: ' + login + ' Password: ' + password);

        // do the login, probably by $.post()ing to your login page
    },
});

车把：

<script type="text/x-handlebars" data-template-name="login">
    {{#view App.LoginFormView tagName="form"}}
        <label>Username:</label>
        {{view Ember.TextField valueBinding="view.username"}} 
        <label>Password:</label>
        {{view Ember.TextField type="password" valueBinding="view.password"}}
        {{#view Ember.Button target="parentView" action="submitLogin"}}Login{{/view}}
    {{/view}}
</script>

至于你的其他问题，我无法完全回答（我对 Ember.js 比较陌生），但我认为 Ember.js 的核心理念主要是作为一个架构框架（但与Handlebars.js)，而不是像其前身SproutCore那样的架构和UI 框架。