成功安装Cytoscape.js

Cytoscape.js本身已经通过bower bower install cytoscape安装并通过ember-cli-build.js导入，已成功连接到Ember：

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

在我的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-Qtip的模拟设置不起作用

虽然，当我通过bower安装cytoscape-qtip时，请将类似于cytoscape的依赖项导入我ember-cli-build.js的应用中，如下所示：

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

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

触发任何图形节点上的鼠标悬停事件后，我将收到以下控制台错误：

Uncaught TypeError: qtip.$domEle.qtip is not a function(…)表示qtip本身尚未在我的组件中定义。 A similar question asked here对我的问题没有帮助，因为那里的人问jquery按正确顺序加载有问题。在我的情况下，jquery已经包含在我的应用中，并且运行正常。

如何在我的Ember应用中添加cytoscape-qtip扩展程序，以便在我的组件中使用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

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

成功安装Cytoscape.js

Cytoscape-Qtip的模拟设置不起作用

2 个答案: