Dojo: loop with data binding

Question

I'm just starting with Dojo, and I'm really impressed with the amount and quality of all the modules. Coming from AngularJS however, I find the two-way data binding of Dojo's MVC a bit lacking.

Is there really no way to subscribe to a Dojo Object Store, have a loop in a template to iterate over the items in the store and having the view update automagically when items are added/removed? The example tutorial uses dojo/store/Observable to implement this cumbersome logic:

results.observe(function(item, removedIndex, insertedIndex){
    // this will be called any time a item is added, removed, and updated
    if(removedIndex > -1){
        removeRow(removedIndex);
    }
    if(insertedIndex > -1){
        insertRow(item, insertedIndex);
    }
}, true);
function insertRow(item, i){ ... }
function removeRow(i){ ... }

In AngularJS you would do something like this:

<li ng-repeat="item in results">
  <span>{{item.text}}</span>
</li>

So do I have to choose between Dojo's extensive widget and modules collection and AngularJS's straight-forward templating with two-way data binding?

Answer 1

First of all, congrats on coming over to the Dojo side. Yes AngularJS is extremely convenient for 2 way data bindings, but you'll soon find out that as an application grows more complex, you'll be needing the help of the powerful (and numerous) Dojo / Dijit / Dojox modules.

You are right dojo/Observable currently provides binding via store in Dojo. It can really achieve the same power as AngularJS. Checkout dgrid examples for a demo.

For convenience, a module has been made for binding in a format similar to Angular JS. Its called dbind. It can be used independently currently and will soon be integrated into Dojo's core. You should also check dojox/mvc/Bind