Question

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

emberJS是否支持表单控件和其他UI控件，如grid，list etch。我知道它是开发框架，但它支持很少的控件文本域 TEXTAREA 复选框。

那说，为什么它不支持像面板这样的其他控件。

Answer 1

戴维斯说得对，但他的代码有一些改进。

Ember.Button已弃用。相反，请使用button标记。
在您的视图中，定义submit事件。提交表单时会触发它。无需在按钮上手动设置操作。
您的观点不应该做任何$.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的核心理念主要是建筑框架（但是有很好的搭配） -ins to Handlebars.js），而不是像其前身SproutCore那样的架构和 UI框架。

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

2 个答案: