Я создаю пример приложения с Ractive.js и gridstack.js, но не могу понять, как добавить gridstack в качестве декоратора. Я думаю, что это правильный способ добавить элементы jQuery в ractive.js, пожалуйста, сообщите, если это не так.
После того, как я создал декоратор и назначил его компоненту 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>
Декоратор gridstack, который я пытаюсь назначить компоненту Dashboard, выглядит следующим образом:
Методы 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__
});