Skip to content

Instantly share code, notes, and snippets.

@bartonhammond
Last active October 5, 2015 17:18
Show Gist options
  • Save bartonhammond/55adfb1afb9cc301cff8 to your computer and use it in GitHub Desktop.
Save bartonhammond/55adfb1afb9cc301cff8 to your computer and use it in GitHub Desktop.
Meteor Webix Datatable Reactive
<!-- format for datatable id, title and url
-->
<template name="postItem">
<li data-id="{{_id}}"
data-title="{{title}}"
data-url='<a href="{{url}}" target="_blank">{{url}}</a>'
>
</li>
</template>
<template name="postslist">
<div id="_postslist">
<div data-id="postslist"
data-view="datatable"
data-type="line"
data-autoheight=1>
<config name="onClick" fa-comment-o="{{onClick}}"></config>
<div data-view="column"
data-hidden=1
data-id="id"></div>
<div data-view="column"
data-fillspace=1
data-id="title">
<strong>{{t9n 'postslist.datatable.column.title'}}</strong>
</div>
<div data-view="column"
data-fillspace=1
data-id="url">
<strong>{{t9n 'postslist.datatable.column.url'}}</strong>
</div>
<div data-view="column"
data-template="<span style='cursor:pointer; text-align:center' class='webix_icon fa-comment-o'></span>"
data-id="discuss">
<strong>{{t9n 'postslist.datatable.column.discuss'}}</strong>
</div>
<ul data-view="data">
{{#each posts}}
{{> postItem}}
{{/each}}
</ul>
</div>
</div>
</template>
'use strict';
Template.postslist.onCreated(function() {
this._component = undefined;
Session.set('postsCount',0);
})
Template.postslist.onRendered(function() {
var component = webix.markup.init($('#_postslist')[0]);
this._component = component;
webix.event(window, 'resize', function(){
if (component) component.resize();
});
/**
* This is a Reactive function, it will fire whenever
* the "postsCount" object changes
* This reloads the data into the _component (datatable)
* but the formatting described by "post_list.html" has vanished
*/
this.autorun(function() {
var postsCount = Posts.find({}, {sort: {submitted: -1}}).count();//reactive
if (postsCount !== Session.get('postsCount')) {
if (Template.instance()._component) {
debugger;
var data = Posts.find({}, {sort: {submitted: -1}}).fetch();
Template.instance()._component.clearAll();
Template.instance()._component.define('data',data);
Template.instance()._component.refresh();
}
Session.set('postsCount',postsCount);
}
});
});
Template.postslist.onDestroyed(function() {
if (webix.ui.views['postslist']) {
webix.ui.views['postslist'].destructor();
}
});
Template.postslist.helpers({
posts: function() {
return Posts.find({}, {sort: {submitted: -1}});
},
onClick: function() {
return "Helpers.postslist_onClickDiscuss";
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment