将引导标签包装到Ember组件中

Wrapping bootstrap-tags into Ember Component

本文关键字：Ember 组件 包装 标签      更新时间：2023-09-26

所以，我使用引导标签从https://github.com/maxwells/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调试器时，没有值被分配(值仍然为空)。这就像beforeAddingTag从来没有工作!我是ember的新手，所以包装这个库的任何清晰度都会有所帮助。

我需要在某处使用一个可观察对象吗?

我想你要:

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();
  }
});
相关文章：