1

10 個のテキスト フィールド要素を持つブートストラップ フォームを作成する必要があります。

ブートストラップ ドキュメントから、各テキスト フィールド要素に対して次のコードが必要です。

<div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
</div>

Em.TextField オブジェクトは、

<input type="text...

ハンドルバーの形状を最小限に抑えたいと思います。

  • 最小限のコードで期待される結果を得るための最良の解決策は何ですか?
  • これのサンプルコードはありますか?
4

1 に答える 1

1

必要なすべてのブートストラップ マークアップを含み、組み込みのEmber.TextField入力要素を組み込んだ新しいビューを作成できます。カスタム TextField にはlabel、フォーム ラベルのテキストを設定する追加のプロパティがあります。

JSBin の例

カスタム テキストフィールド:

JS:

App.BootstrapTextFieldView = Ember.View.extend({
  templateName: 'bootstrapTextField',
  inputElement: null
});

ハンドルバー:

<script type="text/x-handlebars" data-template-name='bootstrapTextField'>
  <div class='control-group'>
    <label class="control-label" {{bindAttr for='view.inputElement.elementId'}}>{{view.label}}</label>
    <div class="controls">
      {{view Ember.TextField valueBinding='view.value' viewName="inputElement"}}
    </div>
  </div>
</script>

新しいビューの使用

通常の使用と同様に使用しますEmber.TextField：

<form class="form-horizontal">
    {{view App.BootstrapTextFieldView valueBinding='textFieldValue' labelBinding='textFieldLabel'}}
</form>

の自動生成された ID を取得する必要があるため、唯一のトリッキーな部分は のfor='..."プロパティを正しく設定することでした。これは、ヘルパーのプロパティを使用して実行できます。設定により、作成した のインスタンスにアクセスし、ヘルパーを使用してラベルのプロパティをビューの ID に設定できます。<label>{{view Ember.TextField ...}}viewName{{view ...}}{{view App.theViewHere viewName='desiredViewName'Ember.TextFieldfor{{bindAttr...}}

于 2013-05-28T20:48:25.307 に答える