Question

我有一个从bootstrap工具提示创建的简单工具提示组件。它在升级到ember 2.11

时停止工作

这是组件：

import Ember from 'ember';
export default Ember.Component.extend({
  tagName: 'img',
  src: '../images/help-icon.png',
  alt: 'img',
  classNames: ['help-ico'],
  dataPlacement:'right',
  dataToggle: 'tooltip',
  title: '',
  attributeBindings: ['src', 'alt', 'title'],
  didInsertElement(){
    this._super(...arguments);
    // call bootstrap tooltip
    this.$().tooltip();
  }
});

我收到以下错误

Uncaught TypeError: this.$(...).tooltip is not a function
    at Class.didInsertElement (tool-tip.js:19)
    at Class.superWrapper [as didInsertElement] (ember.debug.js:40426)
    at Class.trigger (ember.debug.js:42261)
    at Class.superWrapper [as trigger] (ember.debug.js:40426)
    at CurlyComponentManager.didCreate (ember.debug.js:12728)
    at Environment.commit (ember.debug.js:50906)
    at Environment.commit (ember.debug.js:9282)
    at InteractiveRenderer._renderRoots (ember.debug.js:12124)
    at InteractiveRenderer._renderRootsTransaction (ember.debug.js:12153)
    at InteractiveRenderer._renderRoot (ember.debug.js:12074)

我注意到从第三方库创建的所有组件都会出现同样的错误。

我已将bootstrap包含为bower依赖项并将其从ember-cli-build.js加载到项目中，如下所示

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
    // Add options here
});

//include selects css
app.import('bower_components/select2/dist/css/select2.css');

// croper js CSS
app.import('bower_components/cropperjs/dist/cropper.css');

// range slider css
app.import('bower_components/ionrangeslider/css/ion.rangeSlider.css');

//import jquery
app.import('bower_components/jquery/dist/jquery.js');

//import bootstrap js
app.import('bower_components/bootstrap/dist/js/bootstrap.js');


//import map info box
app.import('vendor/map/infobox.js');

//import markerwithlabel for map
app.import('vendor/map/markerwithlabel.js');
app.import('vendor/sliderplugin/ninja-slider.js');
app.import('vendor/sliderplugin/thumbnail-slider.js');

//import twitter typeahead with bloodhound
app.import('bower_components/typeahead.js/dist/typeahead.bundle.js');

//include momemt js
app.import('bower_components/moment/moment.js');

//include selects
app.import('bower_components/select2/dist/js/select2.js');

//import template compiler
app.import('vendor/ember/ember-template-compiler.js');

//noty
app.import('bower_components/noty/js/noty/packaged/jquery.noty.packaged.js');

// Swal
app.import('bower_components/sweetalert/dist/sweetalert.css');
app.import('bower_components/sweetalert/dist/sweetalert.min.js');

// croper js JS
app.import('bower_components/cropperjs/dist/cropper.js');

// geocomplete jquery plugin
app.import('bower_components/geocomplete/jquery.geocomplete.js');

// range slider
app.import('bower_components/ionrangeslider/js/ion.rangeSlider.js');

// range slider custome images and theme
app.import('vendor/range-slider/img/sprite-skin-nice.png', {
    destDir: 'img'
});

return app.toTree();
};

感谢您的帮助。

谢谢，拉温德拉

从第三方库创建的组件在升级到ember 2.11和ember-cli 2.11

0 个答案: