Question

我正在尝试为我的应用创建可重复使用的预先输入组件（？）。我正在使用twitter's 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类选择器。实际上，我将在一个表单上有多个typeahead，所以这个类选择不会削减它。

我也不知道如何从View中的控制器获取值。显然，getPrefetch()，getTemplate()，getValueHolder()等方法不存在。

我知道这是伪代码的TON，但希望我能指出正确的方向。

Answer 1

你可能想要使用一个组件。

之后的秘诀是Ember组件（和View）公开了一个this.$函数，它是一个作用于当前视图的jQuery选择器。所以你只需要这样做：

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

Answer 2

查看我的Twitter TypeAhead implementation for Ember。

你可以像这样使用它：

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"}}

ember.js自定义组件或视图

2 个答案: