如何將gridstack.js添加到Ractive.js？

Question

我正在使用Ractive.js和gridstack.js創建示例應用程序，但無法弄清楚如何將gridstack添加為裝飾器。 我認為這是向ractive.js添加jQuery元素的正確方法，請告知是否不是。

在我創建裝飾器並將其分配給Dashboard組件后，它實際上不起作用，並且來自gridstackDecorator事件不會緩存在Dashboard組件中。

我用不起作用的代碼創建了這個小提琴 ，源代碼如下：

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>

我嘗試分配給Dashboard組件的gridstack裝飾器如下所示：

永遠不會調用update和teardown方法，為什么會這樣？

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小部件組件將呈現每個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,
    }
})

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__
});

Answer 1

您必須通過在元素中添加“as - $ {decoratorName}”來指示Ractive關於您希望裝飾器被調用的元素，例如，在您的情況下

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

您還可以使用命令分隔列表將參數傳遞給裝飾器的更新功能

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

您可以在https://ractive.js.org/v0.x/0.8/decorators和https://ractive.js.org/v0.x/0.8/writing-decorator-plugins上找到更多信息。