gojs嵌套setDataProperty

Question

最初，我的节点数据如下所示：

{
  key: uuid,
  loc: "x y",
  color: color,
  param1: val1,
  param...:val...,
  paramn: valn
}

我决定将我的gojs详细信息和节点数据分成以下内容：

{
  meta: {
    key: uuid,
    loc: "x y",
    color: color
  }.
  data: {
    param1: val1,
    param...:val...,
    paramn: valn
  }
}

但是放弃了把钥匙移出去，因为它看起来需要扎根，并且决定了这一点：

{
  key: uuid,
  meta: {
    loc: "x y",
    color: color
  }.
  data: {
    param1: val1,
    param...:val...,
    paramn: valn
  }
}

我用这样的东西更新了简单的单向绑定：

// old way
new go.Binding('fill', 'color')

// new way
new go.Binding('fill', 'meta', meta => meta.color)

对于双向绑定，我使用fromLocation函数遇到了一些障碍，如下所示：

// This worked fine with a flat state:
// new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
    
// I decided to move my stat into a sub object called meta with the following:
new go.Binding('location', 'meta', toLocation).makeTwoWay(fromLocation)

我不清楚我是否需要调整位置，所以我没有；但是由于保存了一些遗留图表，我暂时还在处理这个问题。

// This works just fine
const toLocation = (meta, node) => {
  // pulls the loc out of the meta, and parses into go.point
  let output = meta.loc;

  // TODO: Shouldn't need to check for a string since we're storing raw values now
  if (typeof output === 'string') {
    output = go.Point.parse(output);
  }
  console.log('toLocation:', { output, meta });

  return output;
};

在fromLocation中，我有非常奇怪的行为：

const fromLocation = (loc, data, model) => {
  // writes the loc as a string to the meta prop
  console.log('fromLocation IN:', { data: _.cloneDeep(data) });

  const meta = _.cloneDeep(data.meta);
  meta.loc = loc;

  console.log('model.nodeDataArray:', model.nodeDataArray);

  if (typeof data.meta !== 'undefined') {
    console.log('fromLocation has meta:', { meta: data.meta, loc });
  }

  this.diagramReferenceService.startTransaction('updating meta');

  model.setDataProperty(data, 'meta', meta);
  data.meta = meta;

  this.diagramReferenceService.commitTransaction('updating meta');

  console.log('fromLocation OUT:', { data: _.cloneDeep(data) });

};

当我查看meta克隆时，会填充元数据，但是这一步的执行方式是将undefined道具设置为undefined，但在这个设置点之后，我的任何其他代码都不会对其进行修改。

我采用了这里的代码：https://gojs.net/extras/bindingSubProperties.html

如下所示：

    const makeTwoWaySubBinding = (rootkey, targetname, sourcename, conversion, backconversion) => {
      console.log('makeTwoWaySubBinding:', { rootkey, targetname, sourcename, conversion, backconversion })
      const bind = new go.Binding(targetname, rootkey);
      bind.mode = go.Binding.TwoWay;

      bind.converter = (root, target) => {
        const value = root[sourcename];
        if (value === undefined) {
          return target[targetname];
        }
        return (typeof conversion === 'function') ? conversion(value, target) : value;
      };

      bind.backConverter = (value, data, model) => {
        const root = data[rootkey];
        if (model) {
          if (typeof backconversion === 'function') {
            model.setDataProperty(root, sourcename, backconversion(value, root, model));
          } else {
            model.setDataProperty(root, sourcename, value);
          }
        } else {
          root[sourcename] = (typeof backconversion === 'function') ? backconversion(value, root, model) : value;
          return root;
        }
      };

      return bind;
    };

他们的例子很紧张，所以我使用了它，并引用如下：

makeTwoWaySubBinding('meta', 'location', 'loc', go.Point.parse, go.Point.stringify)

不过，我也有同样的问题

Answer 1

const makeLocationTwoWayBind = () => {

  const locationTwoWayBind = new go.Binding('location', 'meta');
  locationTwoWayBind.mode = go.Binding.TwoWay;
  locationTwoWayBind.converter = (meta, targetObj) => {
    // gets the location from the node data
    const loc = go.Point.parse(meta.loc);
    return loc;
  };
  locationTwoWayBind.backConverter = (loc, nodeData, model) => {
    // updates the location on the nodeData
    const meta = Object.assign(_.cloneDeep(nodeData.meta), { loc: go.Point.stringify(loc) });
    return meta;
  };

  return locationTwoWayBind;
};

所以问题在一定程度上是我仍然在使用loc，我不知道为什么示例代码使用模型方法setDataProperty --看起来转换器执行类似于简单返回的行为

小咆哮

The `converter` and `backConverter` were -- IMO -- counterintuitively named.
The converter takes the data from the model and applies to to the diagram,
the back converter saves data to the model

that became clear after looking at the input params,
but gave me pause a number of times

the model function names `toLocation` and `fromLocation`
don't really help
I would consider using something like marshall and unmarshall instead.

marshall = backConverter = fromLocation
unmarshall = converter = toLocatation

无论如何，拥有converter简单的return the parsed location就足够了，backConverter需要返回meta，因为meta是go.Binding构造函数中指定的键。我处理了在loc中更新meta的meta参数，然后返回更新的meta

所以现在我有了我要找的东西

{
  key: uuid,
  meta: {
    loc: "x y", <--- locationTwoWayBind handles this
    color: color
  }.
  data: {
    param1: val1,
    param...:val...,
    paramn: valn
  }
}