4

emberjsビューを使用してログインフォームを作成したいと思います。これに使用できるコントロールのアイデア。

emberJSは、フォームコントロールや、グリッド、リストエッチングなどの他のUIコントロールをサポートしていますか。開発用のフレームワークであることは知っていますが、textFieldtextAreaチェックボックスなどのいくつかのコントロールをサポートしています。

そうは言っても、なぜそれがパネルのような他のコントロールをサポートしていないのか。

4

2 に答える 2

7

デイビスはそれを正しく理解しましたが、彼のコードにはいくつかの改善が必要です。

  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>

編集：少し考えた後、おそらく私がコントローラーに入れたすべてのロジックは実際にはルーターに行くはずです。モデルをビューに接続するには、コントローラーを使用する必要があります。

于 2012-12-08T13:09:59.023 に答える
2

昨日ログインフォームを作成しましたが、非同期フォームを作成したいと思います。

私はこの要点を見ることから始めました、それ以来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フレームワークではありません。

于 2012-12-08T09:10:54.720 に答える