[dojo-contributors] TodoMVC + DojoX MVC - Improvements/Issues

James Thomas jthomas.uk at gmail.com
Sat Jan 21 10:40:30 EST 2012


I recently spent some time creating Dojo's entry (
https://github.com/jthomas/todomvc) for the TodoMVC project (
http://addyosmani.github.com/todomvc/) with help from Ed Chatelain and Ben
Hockey. Never having used DojoX MVC before, I kept notes on issues
encountered creating the application to provide some feedback on using the
module to build a simply MVC application.
*
*
*Overall, it worked really well and I definitely think we need to publicise
this aspect of the toolkit much more.* *Newer toolkits (Backbone, Spine)
really promote their MVC support and I'm not sure many of our users know we
can do the same. *

** Extend StatefulModel API for arrays*

Dealing with arrays was one of my main "pain points". It would be nice to
have convenience methods like "push", "pop", for modifying arrays rather
than having to use "add", "remove" with explicit array indices. Adding a
new todo item meant having to explicitly include new list position as an
argument which seems a bit unintuitive to me (
https://github.com/jthomas/todomvc/blob/master/todo-example/dojo/js/todo/app.js#L89
).

Removing a series of elements from an array (clearing all completed todos)
was painful as you can only remove the elements by explicit index and we
have to deal with the remaining list indices left-shifting each time we
remove an element (
https://github.com/jthomas/todomvc/blob/master/todo-example/dojo/js/todo/app.js#L61-78).
Also found "bindInputs" wouldn't trigger on modifying array elements, had
to fall back to "watch"
https://github.com/jthomas/todomvc/blob/master/todo-example/dojo/js/todo/model/TodoModel.js#L60

Would be nice to mirror Backbone's "Collection" model class by having our
own "StatefulArray" class with the usual functions for operating on arrays?

** Support composite values as part of model declaration*

We had two attributes in the model, "completed" and "remaining", that were
composite attributes (calculated from other values). Would be nice if the
StatefulModel supported declare these in meta-data for the StatefulModel
rather than having to manually execute the mvc.bind method during
instantiation.
https://github.com/jthomas/todomvc/blob/master/todo-example/dojo/js/todo/model/TodoModel.js#L44-46
*
*
** Allow binding to inner attributes updates in child models from the
parent. *
*
*
Whenever the user modifies the checkbox, that todo item's model boolean
value is updated and we can to re-calculate the "completed" and "remaining"
model values. I couldn't find a way to bind to any changes to child model
inner attributes from the parent "todo" model. The code has to manually
bind to the "isDone" attribute on every child model, rather than listening
for changes to the parent model array. This is more of a stretch goal but
it would have been useful to have changes "bubble" up to the parent models.
https://github.com/jthomas/todomvc/blob/master/todo-example/dojo/js/todo/model/TodoModel.js#L68-70

** Conditionals in view templates*
*
*
If the user has completed some tasks and/or has some remaining, the view
should show the "stats" element at the bottom of the page. Most of the
other library examples used conditional logic in their templates to achieve
this but I had to bind to a model change, manually toggling CSS classes
representing the state.
https://github.com/jthomas/todomvc/blob/master/todo-example/dojo/js/todo/app.js#L96-99

I was under the assumption that DojoX DTL was pretty much dormant, have we
got any plans to include this functionality in our dijit templating code in
2.0 or would fall under an MVC improvement?

*Reviewing the 1.8 MVC specification (
https://docs.google.com/document/d/1ejZlUwySI0q3n3scInw30drHa7no7Zm-WSZqtYx5scE/edit),
there are already plans to fix some issues I encountered...*

** Binding to any widget property, not just "value".*

Hit this issue trying to bind the dijit.form.CheckBox widgets to the
StatefulModel, due to the "value" and "checked" attributes.

** Docs, Demo App, Integration with DojoX App*

Found documentation sufficient for DojoX MVC but I did read the MVC code
before starting so I'm probably not that representative of a new user.

Hopefully this application will provide a good reference for getting
started with DojoX MVC, but it'd be nice to have a less trivial example and
also show integration with DojoX App and other parts of the toolkit.

Regards,
James Thomas
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mail.dojotoolkit.org/pipermail/dojo-contributors/attachments/20120121/6bb2c9a8/attachment.htm 


More information about the dojo-contributors mailing list