8

この HTML のチャンクを考えると:

<div id="email_field" class="control-group">
  <label class="control-label" for="account.email">Email</label>
  <div id="email_input" class="controls">
    <input id="account.email" name="account.email" type="text" placeholder="jpublic@example.com">
    <span class="help-block">We just need a valid email address.</span>
  </div>
</div>

これを、必要な属性の再利用可能なパーシャルに変換するにはどうすればよいですか? IE: メール、パスワード、パスワード確認など

ある種のビュー階層を想定していますが、よくわかりません。

編集：さらに調査した後、私はノックアウトし{{view}}、{{render}}必要なものを正確に把握しました：

私がしたい： 1.特定のビュー（InputView）を使用する 2.特定のコントローラーを使用する（できれば同様の名前：InputController）（{{view}}これはしないと思います） 3.これを複数回使用できるようにする（これ{{render}}はできません） ) 4. 値を渡すことができる ({{render}}これはできません)

例：

<!-- templates/application.hbs -->
{{foo "input" name="Email" id="account.email" placeholder="jpublic@email.com"}}

// controllers/input.js
Application.InputController = Ember.ObjectController.extend({
  type: "text"
});

// views/input.js
Application.InputView = Ember.View.extend({
  templateName: "form/input"
});

<!-- templates/form/input.hbs -->
<input {{bindAttr id="id" name="name" type="type" placeholder="placeholder"}}>
4

3 に答える 3

1

これを、必要な属性の再利用可能なパーシャルに変換するにはどうすればよいですか? IE: メール、パスワード、パスワード確認など

あなたが欲しいのは、実験的な{{control}}ヘルパーです。コントロール ヘルパーは現在開発中であり、実験的なものと見なされます。有効にするには、ENV.EXPERIMENTAL_CONTROL_HELPER = trueEmber を要求する前に設定します。

私がしたい： 1.特定のビュー（InputView）を使用する 2.特定のコントローラーを使用する（できれば同様の名前：InputController）（{{view}}はこれをしないと思います）

デフォルトのコントロール ヘルパーは、テンプレート名が渡されることを想定しています。そのテンプレート名は、一致するビューとコントローラーを検索するために使用されます。たとえば、次のようになります。

App.InputView = Ember.View.extend()
App.InputController = Ember.Controller.extend()
{{control input}}

見る：

  1. これを複数回使用できるようにする ({{render}} はこれを実行できません)

コントロールは複数回使用できます

  1. 値を渡すことができる ({{render}} はこれを行うことができません)

{{view}}ヘルパーと同様に、{{control}}任意の名前と値のペアを受け入れます。あなたの例のように、コントロールヘルパーにオプションを手動で渡すことができます。{{view}}ヘルパーと同様に、これらのオプションはビュー インスタンスのプロパティになります。

<!-- templates/form/input.hbs -->
<label class="control-label" {{bindAttr for="view.inputId"}}>
  {{view.label}}
</label>
<div class="controls">
  <input {{bindAttr id="view.inputId" name="view.name" type="type" placeholder="view.placeholder"}}>
  <span class="help-block">{{view.help}}</span>
</div>

// controllers/form_input.js
App.FormInputController = Ember.ObjectController.extend({
  type: "text"
});

// views/form_input.js
App.FormInputView = Ember.View.extend({
  classNames: ["control-group"]
});

<!-- templates/application.hbs -->
{{control "form/input" 
    inputId="account.email" 
    name="email"
    label="Email" 
    placeholder="jpublic@email.com" 
    help="We just need a valid email address."
}}

実際の例については、このjsbinを参照してください

また、コントロールはテンプレートで使用するモデルを指定できることにも注意してください。これにより、プロパティをモデル データにバインドできます。また、コントローラーのモデルが変更された場合、その子コントローラーは破棄されるため、モデルがスワップアウトされた場合、コントロールは期待どおりにリセットされます。

于 2013-02-24T05:22:20.033 に答える
1

私は Emberjs を初めて使用し、ほぼ同じものを探していますが、そのためにhttp://emberjs.com/guides/templates/writing-helpers/を使用することはできませんか? 私は自分で試してみるので、うまくいけばさらに更新できます。

更新： OK、私はそれを働かせました。FormgeneratorHelper.js と次のコードを使用して、新しい Helpers フォルダーを作成しました。

Ember.Handlebars.registerBoundHelper('control-group', function (options) {
    var name = options.hash.test.capitalize();
    console.log(name);
    return new Handlebars.SafeString('<div class="control-group"> \
            <label class="control-label" for="input' + name + '">' + name + '</label> \
            <div class="controls"> \
                <input type="text" id="input' + name + '" placeholder="' + name + '" /> \
            </div> \
        </div>');
});

次に、どのテンプレートで実行できるかに関係なく:

{{control-group test="email"}}

ヘルパーを使用するというアイデアは本当に気に入っていますが、(CoffeScript とは対照的に) プレーンな Javascript を使用していて、複数行のコードがある場合、残念ながら少し見苦しくなります。しかし、おそらくまだその方法を使用します。

于 2013-02-20T15:30:43.600 に答える