1

我正在尝试为我的应用程序创建一个可重用的预输入组件（？）。我正在使用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(), 等方法不存在。

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

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 回答