Most of the time in a Meteor project you want to avoid handling the DOM directly and instead rely on Meteor's reactivity to do the work for you. There are times though when you have to take matters into your own hands like handling element animations or in our case for this blog post: sorting a list of objects. This post is inspired by the Meteor.com blog post that does the same thing but no longer works due to API changes: (https://www.meteor.com/blog/2013/09/13/previewing-meteors-new-rendering-engine-reactive-sortable-lists)
First Some Setup
// createameteorproject
% meteorcreatemeteor-sortable
% cdmeteor-sortable
// addthejquery-uipackage
% meteoraddmrt:jquery-ui
// runourserver
% meteor
This will create 3 files in the meteor-sortable folder: meteor-sortable.css, meteor-sortable.html and meteor-sortable.js. Normally we'd structure our app a little differently (taking advantage of the client and server folders) but for the sake of brevity we're just going to keep everything in these three files.
You can now pop open your web browser and go to http://localhost:3000
Next up we're going to create a new Collection in Mongo and seed it with some default data:
Creating Our Collection and Seed It
Add this to the javascript file that was created when you created the project. It creates a new Mongo collection named "items" and seeds it with some data.
meteor-sortable.js
Items=newMongo.Collection('items')
//servercheckonlyrequiredbecausethiscode
//isrunningonbothclientANDserver
if(Meteor.isServer){
//Onlyseedontheserver
Meteor.startup(function(){
//ANDonlyseediftherearenoitems
if(Items.find({}).count()==0){
for(vari=1;i<=10;i++){
Items.insert({
title:"Item"+i,
rank:i
})
}
}
})
}
If you pop open the console in your web browser you can see the data (without refreshing your browser!!!) by running
console.table(Items.find().fetch())
Add some html/css
Next we'll add some very basic html/css. If you're familiar at all with Meteor or at least Handlebars this should look pretty straightforward:
meteor-sortable.html
<head>
<title>meteor-sortable</title>
</head>
<body>
<h1>MeteorSortable</h1>
{% raw %}
{{>items}}
</body>
<templatename="items">
<divid="items">
{{#eachitems}}
<divclass="item">{{title}}</div>
{{/each}}
{% endraw %}
</div>
</template>
meteor-sortable.css
.item{
display:block;
padding:5px;
margin:5px;
background-color:#ccc;
border:1pxsolid#aaa;
width:200px;
cursor:move;
}
Blaze.getData: The bridge between the DOM and your Data
In our example above our "items" template loops through our array of items and creates a div for each one. Did you know that Meteor remembers what data was in scope for every html element on the page?
There's a built in function called Blaze.getData that takes as a parameter an html element and returns the data that was in scope when it was created! That makes dealing with the DOM directly a LOT easier. Pop open the web console and play around with it for yourself:
This will work for ANY html element, not just top level elements in our templates. It will even work when you have multiple templates rendering that have different data contexts!
Adding Sorting To Our Lists
Now that we know how to tie our DOM elements back to data tasks like integrating with JQuery UI become a lot easier. Since we're dealing directly with DOM elements within the JQuery code Blaze.getData saves us a lot of time/money/headaches by serving as a bridge between the DOM and our data:
meteor-sortable.js
...CodeFromAboveomittedforsuccinctness...
//Onlyrequiredbecausethiscodeisrunningon
//theclientANDserver
if(Meteor.isClient){
//AddsomehandlebarshelperstoourTemplate.
//ThisonehandilyenoughreturnsourItemsinrankorder
//SinceMeteorisreactive,wheneverourItemschangeMeteor
//willre-renderourTemplate(puttingtheminthecorrectorder)
Template.items.helpers({
items:function(){
returnItems.find({},{sort:{rank:1}})
}
})
//OncetheTemplateisrendered,runthisfunctionwhich
//setsupJQueryUI'ssortablefunctionality
Template.items.rendered=function(){
this.$('#items').sortable({
stop:function(e,ui){
//getthedraggedhtmlelementandtheonebefore
//andafterit
el=ui.item.get(0)
before=ui.item.prev().get(0)
after=ui.item.next().get(0)
//Hereisthepartthatblewmymind!
//Blaze.getDatatakesasaparameteranhtmlelement
//andwillreturnthedatacontextthatwasboundwhen
//thathtmlelementwasrendered!
if(!before){
//ifitwasdraggedintothefirstpositiongrabthe
//nextelement'sdatacontextandsubtractonefromtherank
newRank=Blaze.getData(after).rank-1
}elseif(!after){
//ifitwasdraggedintothelastpositiongrabthe
//previouselement'sdatacontextandaddonetotherank
newRank=Blaze.getData(before).rank+1
}
else
//elsetaketheaverageofthetworanksoftheprevious
//andnextelements
newRank=(Blaze.getData(after).rank+
Blaze.getData(before).rank)/2
//updatethedraggedItem'srank
Items.update({_id:Blaze.getData(el)._id},{$set:{rank:newRank}})
}
})
}
The power of Meteor
Sorting lists might not seem like a big deal but let's take a step back and think about what we just accomplished. Our project consisted of:
- 37 lines of js (after removing comments and half of those are end brackets)
- 17 lines of html
- 10 lines of css
That's not a lot of code but think about what we did:
This is a FULL STACK application. When you move an item it saves the change to a database (not just locally on your browser).
IT'S REACTIVE! If you open up two (or more) browser tabs side by side and make changes in one you should almost immediately see the change in the other browser!
That is a tiny amount of code but a tremendous amount of functionality and quite frankly revolutionary.
Try It Out
You can deploy this app out using Meteor's free hosting (meant for small/toy apps) using the command line:
meteordeploy<MY_APP_NAME>.meteor.com
#example:meteordeploysortable-lists-jqueryui.meteor.com
I've deployed this out to sortable-lists-jqueryui.meteor.com
