如何将 JointJS 与 Meteor 一起使用？答案

【问题标题】：How can I use JointJS with Meteor?如何将 JointJS 与 Meteor 一起使用？
【发布时间】：2015-12-27 12:26:31
【问题描述】：

我正在尝试运行来自jointjs 教程的示例应用程序，这就是我目前所拥有的。

1) sampleApp.html

   <head>
  <title>sampleApp</title>

</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

<template name="hello">
  <div></div>
</template>

2) sampleApp.js

if (Meteor.isClient) {

  Template.hello.onRendered(function () {

      var graph = new joint.dia.Graph;

      var paper = new joint.dia.Paper({
      el: this.$('div'),
      width: 600,
      height: 200,
      model: graph,
      gridSize: 1
      });

      var rect = new joint.shapes.basic.Rect({
      position: { x: 100, y: 30 },
      size: { width: 100, height: 30 },
      attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
      });

      var rect2 = rect.clone();
      rect2.translate(300);

      var link = new joint.dia.Link({
      source: { id: rect.id },
      target: { id: rect2.id }
      });

      graph.addCells([rect, rect2, link]);
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

当我运行它时，我得到以下错误：

未捕获的类型错误：_.merge 不是函数joint.dia.Cell.Backbone.Model.extend.constructor@joint.js:3831child@backbone.js:1408（匿名函数）@joint.js:7436math@joint。 js:39(匿名函数)@joint.js:44(匿名函数)@joint.js?518ac863e9f6f1f9a755394c59ad7d562c084829:11194

与

来自 Tracker afterFlush 函数的异常： ReferenceError：未定义关节在 [对象对象]。 (:3000/app/client/meteor:/????app/client/sampleApp.js:5)

我已尝试将 sampleApp.html 和 sampleApp.js 都放在项目根目录中以及 /client joint.js 中的 client/

有人处理过这个问题，或者知道如何解决这个 ReferenceError 吗？

编辑：这是发生 Uncaught TypeError 的 JointJS 的内容：

// joint.dia.Cell base model.
// --------------------------

joint.dia.Cell = Backbone.Model.extend({

    // This is the same as Backbone.Model with the only difference that is uses _.merge
    // instead of just _.extend. The reason is that we want to mixin attributes set in upper classes.
    constructor: function(attributes, options) {

        var defaults;
        var attrs = attributes || {};
        this.cid = _.uniqueId('c');
        this.attributes = {};
        if (options && options.collection) this.collection = options.collection;
        if (options && options.parse) attrs = this.parse(attrs, options) || {};
        if (defaults = _.result(this, 'defaults')) {
            //<custom code>
            // Replaced the call to _.defaults with _.merge.
            attrs = _.merge({}, defaults, attrs);
            //</custom code>
        }
        this.set(attrs, options);
        this.changed = {};
        this.initialize.apply(this, arguments);
    },

attrs = _.merge({}, 默认值, attrs);是抛出错误的行

【问题讨论】：

从错误消息中可以看出，页面上没有加载下划线。 Jointjs 似乎使用下划线表示“_.merge(...)”，但没有找到。这导致未定义“关节”，因为它初始化失败。就这么简单吗？
_.merge(...) 的代码是我没有接触过的 Backbone.js 的一部分，我不确定它引用的是什么。
对于未来的搜索者，Backbone.js 确实依赖于单独提供的下划线：。来自文档：“Backbone 唯一的硬依赖是 Underscore.js (>= 1.7.0)。”

标签： javascript backbone.js meteor lodash jointjs

【解决方案1】：

原来这是一个依赖问题，我在安装jointjs-all时通过命令行降级了Backbone和Lodash并解决了这个问题。

流星添加 mxmxmx:jointjs-all --allow-incompatible-update

【讨论】：