- From: <bugzilla@jessica.w3.org>
- Date: Wed, 18 Sep 2013 20:40:40 +0000
- To: public-webapps-bugzilla@w3.org
https://www.w3.org/Bugs/Public/show_bug.cgi?id=23226 --- Comment #7 from Bradley Meck <bradley.meck@gmail.com> --- I have attempted to contact multiple developer communities to comment on this, with only Mozilla providing a response so far with concerns about DOM tree representation vs host state. I have opened issues on several projects seeking developer comments/concerns on this as well. Based upon personal investigation this is what I have learned so far: # Dugg through some Angular code: All the directives for state changes on native controls gather the value/checked/selectedIndex/selectedIndices in the change event to propagate changes to their view. They then propagate these values to JS only listeners (not on the dom) in order to state the nature of mutation in a uniform way. For <input type=text> - https://github.com/angular/angular.js/blob/master/src/ng/directive/select.js#L337 For <input type=radio> - https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L630 For <input type=checkbox> - https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L652 For <select> - https://github.com/angular/angular.js/blob/master/src/ng/directive/select.js#L263 For <select multiple> - https://github.com/angular/angular.js/blob/master/src/ng/directive/select.js#L294 Event Propagation - https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L1075 There is not current use of MutationObservers. # Dugg through some Polymer code: This does "change" event propagation directly onto objects rather than through listeners by use of node.bind (https://github.com/Polymer/NodeBind/blob/master/src/NodeBind.js). Custom elements must implement their own "bind" function and defer to the parent as necessary. It is unclear on what to do when custom elements inherit from custom elements unless you hard code the parent "bind" function. After changes Object observers in JS propagate the state as needed. This allows models to be bound to Nodes directly does not need subtree observation for models that are split across DOM subtrees; however, this approach leads to more observers and reminds me of why people us jQuery.delegate rather than attaching event listeners to every Node. Event binding - https://github.com/Polymer/NodeBind/blob/master/src/NodeBind.js Custom Element binding - http://www.polymer-project.org/platform/node_bind.html#custom-element-bindings Object observation - https://github.com/Polymer/observe-js All of these are independent of the use of MutationObservers. # Dugg through some Knockout code: All data binding for native controls go through an expression engine, with two way data bindings such as those from native forms requiring a bit more effort to figure out what changed. Had a bit of trouble reading through the actual data flow on this one. Data binding propagation - https://github.com/knockout/knockout/blob/master/src/binding/defaultBindings/checked.js - https://github.com/knockout/knockout/blob/master/src/binding/defaultBindings/selectedOptions.js - https://github.com/knockout/knockout/blob/master/src/binding/defaultBindings/value.js Interesting comments - https://github.com/knockout/knockout/blob/b173d028cc044c48ef8bcc570dfa2e414d73c41f/src/binding/expressionRewriting.js#L103 - https://github.com/knockout/knockout/blob/b173d028cc044c48ef8bcc570dfa2e414d73c41f/src/binding/expressionRewriting.js#L188 # Summary I did not find any reference to needing to make attribute based state special snowflake code such as the "open" attribute on <details> (http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element), although this is not fully supported in these libraries. These frameworks are not using attempts to unify MutationObservers with "change" events, but each are creating specific code for monitoring non-DOM state changes on Nodes. Angular provides custom directives to handle changes on native controls. Polymer is explicitly creating a means to propagate changes with the DOM with "bind" but I do not have the experience to comment on how the two-way binding works in practice. Knockout uses expressionRewriting and explicitly has to declare values as "two way", several comments suggest these as special cased situations. # Conclusion A DOM Node based approach using MutationObservers is still lacking data from developers of these libraries. However, there is a need for unification of what state changes occur on Nodes. Whether this should be on the DOM Tree, or DOM host objects is still undetermined. The unification should most likely include custom elements in the future given the Shadow DOM and Custom Elements specifications. Polymer has an existing idea of this with "bind", but would certainly need deeper investigation. "bind" can suffer from a recursive dispatch style situation currently, but this needs further investigation as well. -- You are receiving this mail because: You are the QA Contact for the bug.
Received on Wednesday, 18 September 2013 20:40:43 UTC