JointJS/Rappid 在不使用检查器的情况下更改检查器/单元模型值答案

【问题标题】：JointJS/Rappid change inspector/cell model value without using inspectorJointJS/Rappid 在不使用检查器的情况下更改检查器/单元模型值
【发布时间】：2015-12-22 08:52:24
【问题描述】：

所以我试图在不使用检查器的情况下更新单元模型中文本属性（名称）的值，我需要它来更新检查器字段和链接的单元模型值。不知道该怎么做。有可能吗？

【问题讨论】：

标签： javascript angularjs jointjs rappid

【解决方案1】：

很难从你的问题中准确说出你的意思，而且我没有 Rappid 许可证，所以我无法测试 UI Inspector 部分:o( 但是假设我理解你正确......

...如果您使用属性扩展形状的原型，那么您可以像往常一样在 Angular 中对其进行数据绑定，并且它会在您更改属性时自动更新形状。

我猜这也会更新检查器单元，但我无法测试这个，因为我没有如我所说的 Rappid 许可证。

因此，如果您向这样的形状添加名称属性：

  Object.defineProperty(joint.shapes.basic.Rect.prototype, 'name', {
      get: function () { return this.attr('text/text'); },
      set: function (value) { this.attr('text/text', value); }
  });

您可以在控制器范围内公开要编辑的元素并绑定到它。 HTML：

<div ng-app>
  <div ng-controller="MyCtrl">
    <div id="paper"/>
    <div>
      <label>Type here:</label>
      <input type="text" ng-model="element.name"  />
    </div>
  </div>
</div>

控制器：

function MyCtrl($scope) {

  var graph = new joint.dia.Graph;
  var paper = new joint.dia.Paper({
      el: $('#paper'),
      width: 400,
      height: 400,
      model: graph,
      gridSize: 1,
      interactive: false
  });

  var element = new joint.shapes.basic.Rect({
      position: {x:100, y:30},
      attrs: {text: {text: 'edit my name'}},
      size: { height: 92.7051, width: 150}
  });

  $scope.element = element;

  graph.addCell(element);

  Object.defineProperty(joint.shapes.basic.Rect.prototype, 'name', {
      get: function () { return this.attr('text/text'); },
      set: function (value) { this.attr('text/text', value); }
  });

}

在这里工作 jsfiddle：http://jsfiddle.net/r7n9t9s6/3/

【讨论】：