jquery - How to include Cytoscape.js Extension Cytoscape-qtip into an Ember App -
i use cytoscape extension cytoscape-qtip in component of ember app uses cytoscape.js dependency draw graph.
successful setup of cytoscape.js
cytoscape.js hooked ember installing via bower bower install cytoscape , importing via ember-cli-build.js:
in my-ember-app/ember-cli-build.js:
// in my-ember-app/ember-cli-build.js // .... app.import('bower_components/cytoscape/dist/cytoscape.js'); return app.totree(); in cytoscape-graph component can use cytoscape global variable out of box:
in my-ember-app/app/components/cytoscape-graph.js:
import ember 'ember'; export default ember.component.extend({ didinsertelement(){ let container = this.$(); // ... var cy = cytoscape({ container: container, // ... styles, layout, element selection }); // cytoscape instance renders fine! accessing global cytoscape works fine approach.
analogue setup of cytoscape-qtip doesn't work
although, when install cytoscape-qtip via bower, import dependency similar cytoscape app in ember-cli-build.js so:
in my-ember-app/ember-cli-build.js:
// ... module.exports = function(defaults) { var app = new emberapp(defaults, { // ;.... }); // .... app.import('bower_components/cytoscape/dist/cytoscape.js'); app.import('bower_components/cytoscape-qtip/cytoscape-qtip.js'); return app.totree(); }; and try use qtip method in cytoscape-graph component:
in my-ember-app/app/components/cytoscape-graph.js:
// .... didinsertelement(){ // .... cy.on('mouseover', 'node', function(event) { var node = event.cytarget; node.qtip({ content: 'hello', show: { event: event.type, ready: true }, hide: { event: 'mouseout unfocus' } }, event); }); i following console error once mouseover event on graph node triggered:
uncaught typeerror: qtip.$domele.qtip not function(…) indicating qtip not defined in component yet. a similar question asked here didn't me issue, person asking there had issues jquery being loaded in correct order. in case jquery included in app , working fine.
how include cytoscape-qtip extension in ember app able use qtip in component?
you must follow instructions registering extension , dependencies specified in readme:
for commonjs (e.g. npm+browserify or npm+webpack):
var cytoscape = require('cytoscape'); var jquery = require('jquery'); var cyqtip = require('cytoscape-qtip'); cyqtip( cytoscape, jquery ); // register extension for es6 style (any tooling supports es6):
import cytoscape 'cytoscape'; import jquery 'jquery'; import cyqtip 'cytoscape-qtip'; cyqtip( cytoscape, jquery ); // register extension the lines pretty identical either way.
qtip must registered jquery, you'll have expose jquery globally first:
window.$ = window.jquery = require('jquery'); require('qtip');
Comments
Post a Comment