ember.js自定義組件或視圖

Question

我正在嘗試為我的應用創建可重用的typeahead組件（？）。 我正在使用twitter的typeahead javascript庫，並嘗試從中創建自定義組件/視圖。

我希望能夠在模板中定義預輸入，如下所示：

{{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()等方法不存在。

我知道這是一堆偽代碼，但希望我能指出正確的方向。

Answer 1

您可能要為此使用組件。

之后的秘密是Ember組件（和View）公開this.$函數，這是一個作用於當前視圖的jQuery選擇器。 因此，您只需要執行以下操作：

didInsertElement: function() {
    this.$(".typeahead"); // ... etc
}

Answer 2

看看我的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"}}