1

アプリ用に再利用可能な先行入力コンポーネント (?) を作成しようとしています。Twitter の typeahead JavaScript ライブラリを使用しており、それからカスタム コンポーネント/ビューを作成しようとしています。

テンプレートで typeahead を次のように定義できるようにしたいと思います。

{{view App.TypeAhead name=ta_name1 prefretch=prefetch1 template=template1 valueHolder=ta_value1}}

これらの変数はコントローラーに配置されると考えていました。

App.ApplicationController = Ember.Controller.extend({

  ta_name1: 'movies',

  prefetch1: '../js/stubs/post_1960.json',

  template1: '<p><strong>{{value}}</strong> - {{year}}</p>',

  ta_value1: null    
});

これを達成するために何を使用する必要があるか、コンポーネントまたはビューがわかりません。私はそれがこのようなものになると想像します。

App.Typeahead = Ember.View.extend({
  templateName: 'typeahead',
  didInsertElement: function() {

    $('.typeahead').typeahead([{
      name: this.getName(),
      prefetch: this.getPrefetch(),
      template: this.getTemplate(),
      engine: Hogan,
      limit: 10
    }]);

    $('.typeahead').on('typeahead:selected', function(datum) {
        this.set('controllers.current.' + this.getValueHolder()), datum);
    });
  }
});

みたいなテンプレートで

<script type="text/x-handlebars" data-template-name='typeahead'>
    <input class="typeahead" type="text">
</script>

jQuery クラス セレクターから逃れる方法がわかりません。実際には、フォームに複数のタイプアヘッドがあるため、このクラスの選択ではうまくいきません。

ビューのコントローラーから値を取得する方法もわかりません。明らかに、、、getPrefetch()などgetTemplate()のgetValueHolder()メソッドは存在しません。

これが疑似コードのトンであることはわかっていますが、正しい方向に向けられることを願っています。

4

2 に答える 2

1

おそらく、これにはコンポーネントを使用したいと思うでしょう。

その後の秘密は、Ember コンポーネント (およびビュー)this.$が、現在のビューにスコープされた jQuery セレクターである関数を公開することです。したがって、これを行うだけです：

didInsertElement: function() {
    this.$(".typeahead"); // ... etc
}
于 2013-10-28T14:57:35.320 に答える
0

Ember の Twitter TypeAhead 実装を見てください。

次のように使用できます。

APP.CardiologistsTypeAhead = Bootstrap.Forms.TypeAhead.extend({
  dataset_limit: 10,
  dataset_valueKey: 'id',
  dataset_engine: Bootstrap.TypeAhead.HandlebarsEngine.create(),
  dataset_template: '<strong>{{lastName}} {{firstName}}</strong>',
  dataset_remote: {
    url: '%QUERY',
    override: function (query, done) {
        $.connection.cardiologists.server.getAllByLastNameLike(query) //SignalR
        .then(function (cariologists) {
            done(cariologists);
        });
    }
  },

  didInsertElement: function () {
    this._super();

    var self = this;
    Em.run.schedule('actions', this, function () {
        var cardiologistFullName = this.get('controller.content.cardiologistFullName');
        self.get('childViews')[1].$().val(cardiologistFullName);
    });
  },

  valueChanged: function () {
    this._super();

    this.get('childViews')[1].$().typeahead('setQuery', this.get('controller.content.cardiologistFullName'));
  }.observes('value'),

  selected: function (cardiologist) {
    var cardiologistFullName = '%@ %@'.fmt(Em.get(cardiologist, 'lastName'), Em.get(cardiologist, 'firstName'));
    this.set('controller.content.cardiologistFullName', cardiologistFullName);
    this.set('value', Em.get(cardiologist, 'id'));
  }
});

そしてハンドルバー：

{{view APP.CardiologistsTypeAhead
classNames="col-sm-6"
label="Cardiologist:"
valueBinding="controller.content.referrerCardiologist"}}
于 2013-10-28T14:59:40.777 に答える