Question

所以，我正在使用来自https://github.com/maxwells/bootstrap-tags的bootstrap-tags。我正在尝试将标签实现为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永远不会起作用！我很贪图，所以任何关于包装这个库的清晰度都会有所帮助。

我是否需要在某个地方使用可观察物？

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

将bootstrap-tags包装到Ember组件中

1 个答案: