WPF/XAML Databinding replica on HTML and jQuery



Root of data binding, will be replaced by actual data. This is div id="entry". And you call TemplateBinding.Bind("entry", data);

Intro:

WPF/XAML Databinding replica on HTML and jQuery. Not entirely the same, of course.
This page includes a simple data binding mechanism build using jQuery. Thus, JavaScript and jQuery are both needed. The binding is denoted adding the following reserved words in HTML tag. See the source code to see how it was used. This is only a prototype. It wasn't able to detect changes from the data source, thus, when data source is updated, you need to call data binding again, and the contents are reconstructed instead of updated accumulatively. From this example, you can see the original template defined at bottom of the page. Press "start binding" to see how it is constructed with generated data. Press "update data source" to see how the source is updated and binding is reconstructed. Press "show template" to see the templates. It will be different than the original template because some templates were nested. The system will un-nest the templates. Supporting nested templates makes development easier.

reserved words = templatename, bind, bindcondition, bindtemplate, bindpath

templatename = the id for template
bind = binding for one element
bindcondition = remove element if condition is false. Format = attributeName, operator, value (; is treated as part of value).
bindtemplate = will bind to the template of the specified ID
bindpath = the data path, "" = self, "children" = children, "children/subChildren" = flattened subChildren

format of function = type, path of function; (recommend doing this at end of bind because other bind is static.)
format of attribute, css = type, action, name, path of value;
format of class, html = type, action, path of value;
separated by ;

type = function, attribute, css, class, html

action of attribute, css = add, remove
action of class = add, remove, toggle
action of html = prepend, append, replace

name = static name, like attributeName or cssAttributeName

current draw back = lack of dynamic update.
thought on the issue = will not support dynamic update at all.
In WPF, we use INotitification and ObservableCollection. Implement these not only is difficult, but, add more complexity to the user(programer). Which in term will opens up more bugs and lowers performance.
Instead, recreate everything, assume user client machine is fast enough. If there are some transient values such as selected tab, store it before recreation. Make sure all action binding is done as $().live() to simiplify code.

End Of Page
I am just some text in template1
append 11111111111
prepend 22222222222xxxxxxxxx
replace 33333333333
I am just some text in template2
Condition
append 11111111111
prepend 22222222222
replace 33333333333
I am just some text in template3
append 11111111111
prepend 22222222222
replace 33333333333