javascript - 将 bootstrap-tags 包装到 Ember 组件中

Question

所以，我正在使用 https://github.com/maxwells/bootstrap-tags 中的 Bootstrap 标签。 我正在尝试将标签实现到 Ember 组件中，目前如下所示:

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'input',
  classNames: null,
  value: null,
  initTagsInput() {
    const $el = this.$();
    const _this = this;
    $el.tag({
      placeholder: 'enter associated plasmids',
      beforeAddingTag: function(tag){          //here is my problem I think?
        this.set('value', tag);
      }
    })
  },

  didInsertElement() {
    this._super();
    this.initTagsInput();
  }
});

我遇到的问题是尝试设置该值，但是当我检查控制台或 ember 调试器时，没有分配任何值(值仍然为空)。就像 beforeAddingTag 永远不起作用一样!我对 ember 还很陌生，所以任何关于包装这个库的清晰说明都会有所帮助。

我需要在某处使用可观察对象吗？

Answer 1

我想你想要:

this.set('value', tag);

成为:

_this.set('value', tag);

还有

this.$().tag(/**/)

成为:

this.$().tags(/**/)

该库的示例也使用 div，因此我们可以删除:

tagName: 'input'

占位符在此库中的添加方式也有所不同:

placeholder: 'enter associated plasmids'

应该是:

placeholderText: 'enter associated plasmids'

也就是说，我们可以使用 ES6 中的粗箭头使 this 引用外部上下文，并使其更漂亮:

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: null,
  value: null,
  initTagsInput() {
    this.$().tags({
      placeholderText: 'enter associated plasmids',
      beforeAddingTag: tag => {
        this.set('value', tag);
      }
    })
  },

  didInsertElement() {
    this._super();
    this.initTagsInput();
  }
});