我正在使用Ractive.js和gridstack.js创建示例应用程序，但不知道如何将 gridstack 添加为装饰器。我认为这是将 jQuery 元素添加到 ractive.js 的正确方法，如果不是，请告知。
在我创建了一个装饰器并将其分配给Dashboard组件后，它实际上不起作用，并且来自gridstackDecorator的事件不会缓存在Dashboard组件中。
我用不起作用的代码创建了这个 Fiddle ，源代码如下：
Ractive.js 组件树看起来像：
- App
|--- Dashboard <-- GridstackDecorator
|--- Widget
|--- Widget container components
|--- ...
|--- Widget
|--- Other components
HTML 模板如下所示：
<div id="app"></div>
<script>
window.__APP_INITIAL_STATE__ = {
widgets: [
{id: 1, name: "First widget", x:0, y:0, width:2, height:2},
{id: 2, name: "Second widget", x:5, y:0, width:2, height:2},
{id: 3, name: "Third widget", x:10, y:0, width:2, height:2},
],
};
</script>
我尝试分配给仪表板组件的 gridstack 装饰器如下所示：
updateandteardown方法永远不会被调用，这是为什么呢？
var gridstackDecorator = function gridstackDecorator( node, content ) {
console.log('new decorator', node, content);
var $gridstack;
var $gridstackEl;
var options = {
cellHeight: 80,
verticalMargin: 10,
height:20,
};
$gridstackEl = $(node);
$gridstackEl.gridstack(options);
$gridstack = $gridstackEl.data('gridstack');
$gridstackEl.on('change', function () {
console.log("change");
serialize();
});
function serialize() {
var result = _.map($('.grid-stack .grid-stack-item:visible'), function (el) {
el = $(el);
var node = el.data('_gridstack_node');
return {
id: el.attr('data-custom-id'),
x: node.x,
y: node.y,
width: node.width,
height: node.height
};
});
return result;
}
return {
update(x,y,z) {
// NEVER EXECUTES
console.log("update",x,y,z);
},
teardown(x,y,z) {
// NEVER EXECUTES
console.log("teardown",x,y,z);
$gridstack.destroy();
}
};
};
将呈现每个gridstack容器元素的 Widget 组件是：
var Widget = Ractive.extend({
isolated: true,
template: `<div class="grid-stack-item" data-gs-x="{{x}}" data-gs-y="{{y}}" data-gs-width="{{width}}" data-gs-height="{{height}}">
<div class="grid-stack-item-content">
{{id}}-{{name}} (x: {{x}}, y: {{y}})<a href="#" on-click="@this.fire('deleteWidget', event, id)">Xxx</a>
</div>
</div>`,
oninit() {
},
onrender() {
console.log("render");
},
data: {
x:10,
y:10,
width:100,
height:100,
}
})
Dashboard 组件，其中gridstack装饰器被分配给：
var Dashboard = Ractive.extend({
isolated: true,
components: {
Widget
},
decorators: {
gridstack: gridstackDecorator
},
oninit() {
},
deleteWidget(id) {
console.log("deleteWidget", id);
},
addWidget(name) {
var widgets = this.get("widgets");
var id = widgets.length + 1;
widgets.push({
id: id,
name: name,
x:1,
y:1,
width:2,
htight:2
});
this.set("widgets", widgets);
},
updateWidgets(data) {
console.log("update widgets");
},
template: `
<div class="grid-stack" as-gridstack>
<a on-click="addWidget('New widget')" href="#">Add New</a>
{{#each widgets}}
<Widget
id="{{this.id}}"
name="{{this.name}}"
x="{{this.x}}"
y="{{this.y}}"
width="{{width}}"
height="{{height}}"
on-deleteWidget="@this.deleteWidget(id)"
>
</Widget>
{{/each}}
</div>`
});
将使用 Dashboard 组件呈现整个应用程序的根组件如下所示：
var App = new Ractive({
el: '#app',
template: `<Dashboard widgets={{widgets}}></Dashboard>`,
components: {
Dashboard
},
data: window.__APP_INITIAL_STATE__
});