Refactor to use programmatic setup of mvc bindings

[ccmitchellusa]

I tried to write a calendar app this weekend using the latests dojox.app/mvc and todo app as an example, and my impression is that we have two big issues that still need to be fixed. The first is something we can do directly in todomvc app, but also needs good examples in dojox.mvc. The second issue is one that will need to be fixed in dojox.app.

For the first issue: It's very confusing having the mvc/binding work done in the template files. The MVC JS code in declarative format is too difficult to figure out how to get working properly. Things that should be simple to set up are made complicated by the syntax of how binding info gets put into declarative markup.

Because of this, I would not recommend that anyone use this declarative approach, even for "simple" use cases.

I'd like us to refactor todo app to not use declarative approach to bindings. Instead, use programmatic approach and setup bindings and event handlers within the init part of the "controller" lifecycle (in the views/*.js files). Binding of UI controls to model elements is a controller function, so let's keep all binding/mvc code that's controller-related in the backing JS files and out of the markup. We need to emphasize the programmatic approach to setting up bindings in our dojox/mvc examples (a separate ticket will be opened against dojox/mvc for this)

Keep the "templates" (views) markup for setting up the DOM markup with html and UI components only.

The second issue is that the templates+views controller should work just like dijit/Templated does. We need the ability to use attachPoints and attachEvents within the templates, and use properties/functions in the controller for the attachPoints and attachEvents. Ticket #22 has been opened against dojox_application for this: https://github.com/dmachi/dojox_application/issues/22

[edchat]

For the first part of this issue: "very confusing having the mvc/binding work done in the template files", I would like to better understand what was causing the confusion, because I think many developers will prefer the declarative approach, and I think we need to understand why it is confusing and fix that if at all possible. Perhaps having some comments in the html explaining what was being done would have helped.

For the list.html, the markup looks like this:

        <ul data-dojo-type="dojox.mobile.RoundRectList" id="items_list"   
            data-dojo-mixins="dojox/mvc/Repeat" 
            data-dojo-props="exprchar:'#', children: at(this.loadedModels.itemlistmodel, 'model')">
                <li  data-dojo-type="dojox.mobile.ListItem" clickable="true" class=mblVariableHeight
                    data-dojo-props="onClick: function(){todoApp.showItemDetails('#{this.index}');}"
                    transitionOptions='{title:"Detail",target:"details,detail",url: "#details,detail"}'>  
                    <table><tr>
                        <td><input preventTouch='true' type='checkbox' 
                                data-dojo-type="dojox.mobile.CheckBox" 
                                data-dojo-props="checked: at('rel:#{this.index}','completed')"/></td>

                        <td data-dojo-type="dojox.mvc.Output" 
                            data-dojo-props="value: at('rel:#{this.index}','title')"></td>
                    </tr></table>
                </li>
        </ul>   

With the above, I could guess that there may be a few areas for confusion, but I would like your confirmation. 1) The use of data-dojo-mixins="dojox/mvc/Repeat" with the data-dojo-type="dojox.mobile.RoundRectList" on the UL could be confusing. 2) The use of the at function and the children attribute to bind the contents of the repeat could have been confusing: children: at(this.loadedModels.itemlistmodel, 'model') 3) The relative binding of the checkbox inside the li could have been confusing: data-dojo-props="checked: at('rel:#{this.index}','completed')" 4) The same for the relative binding of the Output in the li: data-dojo-props="value: at('rel:#{this.index}','title')"

Or was there something else?

Once we understand what specifically was confusing we can see if a programmatic implementation would help, or if better comments are needed or if there is something we should be changing about the dojox/mvc support in general.

Thanks

[edchat]

One of the things Chris would like to see is the moving of the binding from the View (template html file) into the controller javascript file, in order to have better separation between the View and the Controller. So lines like this would be removed from the html file.

data-dojo-props="value: at('rel:#{this.index}','title')"

I have made this change in my programmatic branch for the details/detail.html and detail.js, but it is not quite as simple when using dojox/mvc/Repeat. I have some options for the items/list and items/date, but I think more thought and work is still to be done for those in the programmatic branch.

[edchat]

As part of the change to use more programmatic setup, I will change some of the views to use dojox/mvc/WidgetList instead of dojox/mvc/Repeat.

[cjolif]

@edchat can't this be closed now?