1

私は Ember.js が初めてで、コードのクリーンアップについて質問があります。Ember(v1.0.0-rc.1)、Handlebars("1.0.0-rc.3")、および Bootstrap(v2.3.1) を使用しています。

以下のテンプレートの 1 つを使用してください。

<form class="form-horizontal">

  <div class="control-group">
    <label class="control-label" for="inputEmail">Name</label>
    <div class="controls">
      {{view Ember.TextField valueBinding="name" id="inputEmail"}}
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="inputNumber">ID Number</label>
    <div class="controls">
      {{view Ember.TextField valueBinding="number" id="inputNumber"}}
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="inputContactName">Contact Name</label>
    <div class="controls">
      {{view Ember.TextField valueBinding="invoiceContactName" id="inputContactName"}}
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="inputContactEmail">Contact Email</label>
    <div class="controls">
      {{view Ember.TextField valueBinding="invoiceContactEmail" id="inputContactEmail"}}
    </div>
  </div>
</form>

このリッチなビュー フレームワークを手に入れた今、その繰り返しのすべてがとても汚く感じられます。問題はテンプレートの性質です...バインドしているオブジェクトも渡す必要があり、さらにテンプレートがレンダリングする値を変更する必要があります。私の最初の試みは、Handlebars テンプレートを「ネスト」することでした...これは面倒で、どこにも行きませんでした。私の 2 番目の試みは、Handlebars がコンパイルする前にテンプレート文字列を変更するための「プリプロセッサ」を作成することでした...これはきれいに見えましたが、まったく機能しません...文脈から外れています。以下の例:

App.BootstrapTextField = Ember.View.extend({
  displayLabel: null, 
  valueToBind: null,
  classNames: ['control-group'],

  templateString: '<div class="control-group">' +
                    '<label class="control-label" for="input##valueToBind##">##displayLabel##</label>' +
                    '<div class="controls">' +
                      '{{view Ember.TextField valueBinding="##valueToBind##" id="input##valueToBind##"}}' +
                    '</div>' +
                  '</div>',

  preprocessTemplate: function () {
   var template =  this.templateString.replace(/##valueToBind##/g, this.get('valueToBind'));
   return template.replace(/##displayLabel##/, this.get('displayLabel'));
  },

  template: Ember.Handlebars.compile(this.preprocessTemplate())
})

エラー：

Uncaught TypeError: Object [object global] has no method 'preprocessTemplate'

私の質問は次のとおりです。これをクリーンアップするための最良の方法は何ですか?

4

2 に答える 2

1

私の考えでは、Ember Mixin をレイアウト プロパティと共に使用すると、目的を達成するのに役立つと思います。

App.BootstrapMixin = Em.Mixin.extend({
  layout: Em.Handlebars.compile(
              '<div class="control-group">' +
                '<label class="control-label" for="input##valueToBind##">##displayLabel##</label>' +
                '<div class="controls">' +
                  '{{yield}}' +
                '</div>' +
              '</div>')

})

次に、次のようにカスタム ブートストラップ ビューを定義できます。

 App.BootstrapTextField = Em.TextField.extend(App.BootstrapMixin, {
    // your custom logic
 })

次のようにテンプレートに含めます。

<form class="form-horizontal">
   {{view App.BootstrapTextField valueBinding="name" id="inputEmail"}}
   .. 
   ..
</form>

これがすべて機能することを正確に確認したわけではありません (ばかげたエラーか何かが発生した可能性があります) が、一般的な考え方は、あなたを軌道に乗せるのに十分なはずだと思います。お役に立てれば！

于 2013-03-04T08:21:11.757 に答える