Javascript 如何将gridstack.js添加到Ractive.js？

我正在使用和创建示例应用程序，但不知道如何添加gridstack作为装饰器。我认为这是向ractive.js添加jQuery元素的正确方法，如果不是，请给出建议

在我创建了一个装饰器并将其分配给

仪表板

组件后，它实际上不起作用，

gridstackDecorator

中的事件不会缓存在

仪表板

组件中

我使用不起作用的代码创建，源代码如下：

Ractive.js组件树将如下所示：

- App
|--- Dashboard    <-- GridstackDecorator
    |--- Widget
        |--- Widget container components
    |--- ...
    |--- Widget
|--- Other components

将呈现每个

gridstack

容器元素的小部件组件是：

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,
    }
})

根组件将使用仪表板组件呈现整个应用程序，如下所示：

var App = new Ractive({
    el: '#app',
    template: `<Dashboard widgets={{widgets}}></Dashboard>`,
    components: {
        Dashboard
    },
    data: window.__APP_INITIAL_STATE__
});

var-App=new-Ractive({
el:“#应用程序”，
模板：``，
组成部分：{
仪表板
},
数据：窗口。应用程序初始状态__
});

您必须通过在元素中添加“as-${decoroname}”来指示Ractive您希望调用decorator的元素，就像在您的示例中一样

<div as-gridstack [other attributes...]> ... </div>

。。。

您还可以使用命令分隔列表将参数传递给decorator的update函数，如

<div as-gridstack="arg1, arg2, ..., argN" [other attributes...]> ... </div>

。。。

---

你可以找到更多的信息，并且

问题很长，考虑做一个极小的例子。

var App = new Ractive({
    el: '#app',
    template: `<Dashboard widgets={{widgets}}></Dashboard>`,
    components: {
        Dashboard
    },
    data: window.__APP_INITIAL_STATE__
});

<div as-gridstack [other attributes...]> ... </div>

<div as-gridstack="arg1, arg2, ..., argN" [other attributes...]> ... </div>