1

そのため、インスペクターを使用せずにセル モデルのテキスト属性 (名前) の値を更新しようとしています。インスペクター フィールドとリンクされたセル モデル値の両方を更新するには、これが必要です。これを行う方法がわかりません。出来ますか？

4

1 に答える 1

2

あなたの質問からあなたが何を意味しているのかを正確に伝えるのは少し難しいです.さらに、私はRappidライセンスを持っていないので、UIインスペクターの部分をテストすることはできません:o(しかし、私があなたを正しく理解していると仮定すると...

...プロパティを使用してシェイプのプロトタイプを拡張すると、通常どおりAngularでデータバインドでき、プロパティを変更するとシェイプが自動的に更新されます。

これにより、インスペクタ セルも更新されると思いますが、先ほど述べたように、私は Rappid ライセンスを持っていないため、これをテストすることはできません。

したがって、次のような形状に name プロパティを追加すると:

  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/

于 2016-02-04T22:15:04.930 に答える