流星：使外部脚本的参数具有反应性

Question

在我的流星应用程序中，有一个按钮可以从用户视图更改为编辑器视图。在这一部分中，我使用 JointJS 作为显示和编辑图表的外部包。 (api.use('mxmxmx:jointjs-all@0.9.3');)

在用户视图中，图表不应是可编辑的。所以我想将 interactive 从 true 切换为 false，反之亦然。

但在我的尝试中，变量不是反应性的：Session.set('editor', true) 不会立即更改视图。我必须重新加载页面才能看到新视图。

我怎样才能使它具有反应性？

var graph = new joint.dia.Graph;

Template.jointjs.onRendered(function() {

    var interactive = Session.get('editor') ? true : false;
    var paper = new joint.dia.Paper({
        el: $('#canvas'),
        width: 801,
        height: 496,
        model: graph,
        interactive: interactive,
    });

});

<template name="jointjs">
    <h1>{{diagram.title}}</h1>
    <div id="canvas"></div>
</template>

更新

这也不起作用，因为交互式变量只是通过重新加载页面才生效：

Tracker.autorun(function() {
    var interactive = Session.get('editor') ? true : false;
    var paper = new joint.dia.Paper({
        el: $('#canvas'),
        width: 801,
        height: 496,
        model: graph,
        interactive: interactive
    });
});

Answer 1

Reading the Docs告诉我们可以给interactive参数传递一个函数：

interactive - if set to false, interaction with elements and links is disabled. If it is a function, it will be called with the cell view in action and the name of the method it is evaluated in ('pointerdown', 'pointermove', ...). If the returned value of such a function is false interaction will be disabled for the action. For links, there are special properties of the interaction object that are useful to disable the default behaviour. These properties are: vertexAdd, vertexMove, vertexRemove and arrowheadMove. By setting any of these properties to false, you can disable the related default action on links.

所以这里不需要meteor的reactivity，只要设置一个flag让传递给interactive的函数可以检查即可。例如：

Session.set('CanEdit', 真)

interactive: function(cellView) {
  return Session.get('CanEdit');
}

您不需要使用 Session 变量（或其他反应性数据源），但是通过使用一个，您还可以更新模板以直观地指示您在 'Editor View' 或 'User View'.

流星：使外部脚本的参数具有反应性

meteor: make parameter of external script reactive

javascript

meteor

jointjs