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 调试器时，没有任何值被分配(值仍然为 null)。这就像 beforeAddingTag 永远不起作用!我是 ember 的新手，所以任何关于包装这个库的清晰度都会有所帮助。

我需要在某处使用 observable 吗？

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'

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

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();
  }
});