如何将Cytoscape.js扩展Cytoscape.js包含到Ember应用程序中

Question

我想在我的Ember应用程序的一个组件中使用cytoscape-qtip，它已经将Cytoscape.js作为一个依赖项来绘制一个图形。

Cytoscape.js的成功安装

Cytoscape.js本身已经成功地通过bower bower install cytoscape安装并通过成员-cli-build.js导入了Ember：

在我的成员-应用程序/成员-cli-build.js：

// in my-ember-app/ember-cli-build.js
// ....
app.import('bower_components/cytoscape/dist/cytoscape.js');
return app.toTree();

在我的cytoscape-graph组件中，我可以开箱即用cytoscape全局变量：

在my-ember-app/app/components/cytoscape-graph.js:中

import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement(){
  let container = this.$();
 // ...
 var cy = cytoscape({
   container: container,
 // ... styles, layout, element selection
 }); // this cytoscape instance renders fine!

使用这种方法可以很好地访问全局cytoscape。

Cytoscape的模拟设置不起作用

尽管当我通过bower安装cytoscape-qtip时，将类似于cytoscape的依赖项导入到cytoscape中的应用程序中，如下所示：

在我的成员-应用程序/成员-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();
};

并尝试在我的qtip组件中使用cytoscape-graph方法：

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

一旦触发任何图形节点上的mouseover事件，我将得到以下控制台错误：

Uncaught TypeError: qtip.$domEle.qtip is not a function(…)表示qtip本身还没有在组件中定义。A similar question asked here没有帮助我解决我的问题，因为询问我的人对jquery按正确的顺序加载有问题。在我的例子中，jquery已经包含在我的应用程序中，并且运行良好。

如何将cytoscape-qtip扩展包含在我的Ember应用程序中，以便能够在组件中使用qtip？

Answer 1

您必须遵循注册扩展及其依赖项的说明，与自述文件中所指定的完全相同：

对于CommonJS (例如npm+browserify或npm+webpack)：

var cytoscape = require('cytoscape');
var jquery = require('jquery');
var cyqtip = require('cytoscape-qtip');

cyqtip( cytoscape, jquery ); // register extension

对于ES6样式(任何支持ES6的工具)：

import cytoscape from 'cytoscape';
import jquery from 'jquery';
import cyqtip from 'cytoscape-qtip';

cyqtip( cytoscape, jquery ); // register extension

无论用哪种方式，线条都是完全相同的。

Qtip必须注册到jQuery，因此您可能必须首先向全局公开jQuery：

window.$ = window.jQuery = require('jquery');
require('qtip');

另见https://github.com/qTip2/qTip2/pull/810

Answer 2

    var node = event.cyTarget;
                                                       node.qtip({
                                                           content: 'hello:',
                                                           position: {
                                                               my: 'top center',
                                                               at: 'bottom center',
                                                               adjust: {
                                                                   method: 'shift'
                                                               },
                                                               viewport: true
                                                           },

                                                           show: {
                                                               event: 'mouseover'
                                                           },

                                                           hide: {
                                                               event: 'mouseout unfocus'
                                                           },

                                                           style: {
                                                               classes: 'qtip-bootstrap qtip-filters',
                                                               tip: {
                                                                   width: 16,
                                                                   height: 8
                                                               }
                                                           },


                                                       });