jeudi 2 février 2017

components created from third party libraries are broken when upgraded to ember 2.11 and ember-cli 2.11

I had a simple tooltip component created from bootstrap tooltip. It stoped working when upgraded to ember 2.11

here is the component:

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

I am getting below error

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)

I noticed that same error is coming for all components created from third party libraries.

I have included bootstrap as bower dependency and loading it into project from ember-cli-build.js as shown below

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/http://ift.tt/1rsyzAh');

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

Thanks for your help.

Thanks, Ravindra




Aucun commentaire:

Enregistrer un commentaire