继此讨论之后:RactiveJS and jQuery plugins我能够将 jquery 插件包装到 ractive 装饰器中。您将看到我使用 data.resources.splice(newIndex, 0, data.resources.splice(oldIndex, 1)[0] ); 行硬连线/操作数据数组;
这就是暴力。理想情况下,我希望能够从节点检索键路径。
我很难弄清楚如何获取所选节点使用的键路径...它由 data.resources 填充。我尝试过 ractive.get() - 但这会返回根(“数据”)中的所有内容。
有没有一个方法会返回('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,并从中获得 key 路径。然而,我仍然需要输入“数据”。之前...所以现在就必须弄清楚这一点。
***** 编辑 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');
}
};
};
最佳答案
var info = Ractive.getNodeInfo(node);
(参见:http://docs.ractivejs.org/latest/ractive-getnodeinfo)
为您提供 { ractive: instance, keypath: keypath, index:indexs }
其中 keypath
是节点的上下文,如果它位于 { {#each}}
类似于 resources.0
。
然后您可以执行以下操作:
lastDotIndex = sourceKeypath.lastIndexOf( '.' );
sourceArray = sourceKeypath.substr( 0, lastDotIndex );
sourceIndex = +( sourceKeypath.substring( lastDotIndex + 1 ) );
获取数组(上面来自ractive-decorators-sortable)
关于javascript - Ractive JS 和 jquery 插件 - 访问/操作数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31193991/