Meteor is the web framework that I have been learning for past few weeks. It is powerful and easy to learn but some functions are still under-developed hence some bugs.
When playing with the Todo List example, I discovered a bug in the example. The example has a function to display a “loading text” in item panel when the user selects a new list and the corresponding items are being loaded from database. However, if the user switches between the lists very fast and selects the next list before the current list is loaded, the item panel will be forever stuck at loading. This may not be a issue when running on a local server but it would be much more serious if the Internet connection to server is slow.
I am not entirely sure of the cause of this problem but it has to do with how DOM elements are updated when the variables get changed. For some reason, if the Meteor.subscribe() method does not return before the next execution, the DOM elements will not be updated.
I solved this issue by using a session variable, which is altered when new list is selected. In this way, a selection of new list will always trigger the change in session variable and hence update DOM accordingly. Below is the relevant code modified by me:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Always be subscribed to the todos for the selected list. Deps.autorun(function () { var list_id = Session.get('list_id'); if (list_id){ todosHandle = Meteor.subscribe('todos', list_id); Session.set('loading_item', !todosHandle.ready()); } else{ todosHandle = null; } }); ////////// Todos ////////// Template.todos.loading = function () { return Session.get('loading_item'); }; |
This technique is related to meteor’s reactivity, here is the reference on Reactivity for meteor.