4

Obj:-

To add drag n drop ability in the meteor ToDo example app.

Why:-

Going through the learning curve.

What i can think of :-

Using jquery UI (as external js) and bind the update event to todo lists. having a data field on the li items, so as to execute update command from the same function itself.

Was wondering if there exists a more meteor-y approach..

Thanks!

TarunG
  • 602
  • 5
  • 21

2 Answers2

1

Meteor's templating engine (Spark) would redraw your TODO list on any change to the underlying data, which i expect would mess up normal operation of JQuery UI.

Consider using constant for your JQuery UI managed regions.

Lloyd
  • 8,204
  • 2
  • 38
  • 53
  • i get your point, but in this case "if" we use jUI then i am not sure if the list which is greatly controlled by spark, should be exercised under 'constant' region – TarunG Oct 01 '12 at 13:24
  • you can appreciate the tradeoff.. Without constant, you will need to manually re-apply jUI state each time Meteor rebuilds the DOM elements in question.. Hopefully that would be a painless experience, but sometimes not (hence the reason for constant) – Lloyd Oct 01 '12 at 14:13
0

From this answer and from Lloyd's answer above, here is the work-around:

<template name="todos">
...code...
  {{#constant}}
  {{sort_code}}
  {{/constant}}
</template>

--

<div class="todo-text" data-id="{{_id}}">{{text}}</div>

in todo.js 

Template.todos.sort_code = function(){
Meteor.defer(function(){
$('#item-list').sortable({
  update: function(e,iq){
    $('div.todo-text',this).each(function(i){
            var id = $(this).attr('data-id');
            Todos.update(id, {$set:{order:i+1}});
  });
  },
});
$( "#item-list" ).disableSelection();
console.log('dd');

});
};
Community
  • 1
  • 1
TarunG
  • 602
  • 5
  • 21
  • the "hacky workaround" you have used was rendered obsolete by the release of Spark in Meteor 0.4.0.. use the [rendered](http://docs.meteor.com/#template_rendered) callback.. – Lloyd Oct 01 '12 at 16:42
  • Umm, i tried using 'rendered' callback before this, but i was not sure about using it as, it was evident to me from console log, that the function is fired a many a times, in a single page load(no activity just refresh, and same happens each time the DOM is re rendered. I might be missing out here something, some help would be great! – TarunG Oct 01 '12 at 17:16
  • i didn't say the learning curve would be easy! You just need to play around and learn how Spark operates.. – Lloyd Oct 01 '12 at 17:21
  • make sure you've read all the material on the Meteor github wiki, too – Lloyd Oct 01 '12 at 17:21