Ractive JS 和 jquery 插件 - 访问/操作数据

Question

根据此讨论：RactiveJS and jQuery plugins 我能够将 jquery 插件包装到 ractive 装饰器中。您会看到我使用 data.resources.splice(newIndex, 0, data.resources.splice(oldIndex, 1)[0] );

行硬连接/操作数据数组

这是蛮力。理想情况下，我希望能够从节点中检索密钥路径。

我很难弄清楚如何获取所选节点使用的键路径...它由 data.resources 填充。我试过 ractive.get() - 但是 return 是从根 ('data') 开始的所有内容。

有没有什么方法可以return ('data.resources')

var sorttable = function (node) {

  var oldIndex;
  var newIndex;
  $(node).sortable({
  containerSelector: 'table',
  itemPath: '> tbody',
  itemSelector: 'tr',
  placeholder: '<tr class="placeholder"/>',
  onDragStart: function ($item) {
    oldIndex = $item.index();
      console.log(oldIndex , newIndex);
  },
  onDrop: function  ($item) {
    newIndex = $item.index();
    if(newIndex != oldIndex) {
      console.log(oldIndex , newIndex);
      data.resources.splice(newIndex, 0, data.resources.splice(oldIndex, 1)[0] );
    }

  }
});
  return {
    teardown: function () {
      $(node).sorttable('destroy');
    }
  };
};

Ractive.decorators.sortable = sorttable;

***** 编辑 *****

    var sorttable = function (node) {

  var oldIndex;
  var newIndex;
  $(node).sortable({
  containerSelector: 'table',
  itemPath: '> tbody',
  itemSelector: 'tr',
  placeholder: '<tr class="placeholder"/>',
  onDragStart: function ($item) {


    oldIndex = $item.index();
      console.log(oldIndex , newIndex);
  },
  onDrop: function  ($item) {
    newIndex = $item.index();

    var info = $item.context.parentNode;
    info = Ractive.getNodeInfo(info);
    var sourceKeypath = info.keypath;


    var lastDotIndex = sourceKeypath.lastIndexOf( '.' );
    var sourceArray = sourceKeypath.substr( 0, lastDotIndex );


    if(newIndex != oldIndex) {
      console.log(oldIndex , newIndex);
      data[sourceArray].splice(newIndex, 0, data[sourceArray].splice(oldIndex, 1)[0] );
    } 

  }
});
  return {
    teardown: function () {
      $(node).sortable('destroy');
    }
  };
};

由于我的设置方式，我不得不进行一些奇怪的遍历...我必须找到 TR，并从中获得关键路径。但是，我仍然必须在 'data.' 之前输入...所以现在才想明白这一点。

***** 编辑 2 - 这行得通！ *****

    var sortTable = function (node) {

  var oldIndex;
  var newIndex;
  $(node).sortable({
  containerSelector: 'table',
  itemPath: '> tbody',
  itemSelector: 'tr',
  placeholder: '<tr class="placeholder"/>',
  onDragStart: function ($item) {
  // Get index of our 'grabbed' item
    oldIndex = $item.index();
      console.log(oldIndex , newIndex);
  },
  onDrop: function  ($item) {
    // Get index of our 'dropped' item
    newIndex = $item.index();
    // Get the parentNode (this would be the tr)
    var info = $item.context.parentNode;
    // Then get all the Ractive info about this TR (gives us the keypath etc)
    info = Ractive.getNodeInfo(info);
    // Put the keypath into its own variable
    var sourceKeypath = info.keypath;

    // The keypath returns the array, plus the index of the item.
    // We don't need the index - only the name of the array
    var lastDotIndex = sourceKeypath.lastIndexOf( '.' );
    var sourceArray = sourceKeypath.substr( 0, lastDotIndex );
    // We need the parentObj so we can do parentObj[sourceArray]
    // nb: data[resources]
    // So grab the parent, and stick it into its own var
    var parentObj = ractive.get( sourceKeypath.parent );

    // Then update the array with the new order here
    if(newIndex != oldIndex) {
      console.log(oldIndex , newIndex);
      parentObj[sourceArray].splice(newIndex, 0, parentObj[sourceArray].splice(oldIndex, 1)[0] );
    } 

  }
});
  return {
    teardown: function () {
      $(node).sortable('destroy');
    }
  };
};

Answer 1

var info = Ractive.getNodeInfo(node);

（参见：http://docs.ractivejs.org/latest/ractive-getnodeinfo）

给你 { ractive: instance, keypath: keypath, index: indices }，其中 keypath 是节点的上下文，如果它在 {{#each}} 中，它将类似于 resources.0。

然后您可以执行以下操作：

    lastDotIndex = sourceKeypath.lastIndexOf( '.' );
    sourceArray = sourceKeypath.substr( 0, lastDotIndex );
    sourceIndex = +( sourceKeypath.substring( lastDotIndex + 1 ) );

获取数组（以上来自ractive-decorators-sortable）

Ractive JS 和 jquery 插件 - 访问/操作数据

Ractive JS and jquery plugins - accessing / manipulating data

javascript

jquery

ractivejs