Is it possible to handle dynamically created local / light DOMs in Polymer to ensure the correct bindings?

Is it possible to change local / light DOMfrom JS inside a custom element so that it handles the bindings for dynamically added elements as if they were specified in template?

Please consider the following snippet (part of user element):

...
            attached: function () {
                var node = document.createElement('div');                        
                Polymer.dom(node).innerHTML = '[[_computedValue()]]';
                Polymer.dom(this.$.container).appendChild(node);
                Polymer.dom.flush();
            },

            _computedValue: function() {
                return "some value";
            },
...

I would like the added one to divhave its own HTML equal to the value returned by the method _computedValue. A value cannot be assigned at creation time div, since in a real situation it will depend on the real-time context.

+4
source share
1 answer

, Polymer 1.0 () . - .

, dom-bind. , dom-bind.

, domBind tapCount, tapMessage _tapMe. on-tap domBind div.

attached: function () {
   var domBind = document.createElement('template', 'dom-bind');
   domBind.tapCount = 0;
   domBind.tapMessage = 'Tap me now!';
   domBind._tapMe = function(e) {
                this.tapCount = this.tapCount + 1;
                this.tapMessage = 'Tapped ' + this.tapCount + ' time(s).';
   };
   var div = domBind.content.ownerDocument.createElement('div');
   div.innerHTML = '<b on-tap="_tapMe">[[tapMessage]]</b>';
   domBind.content.appendChild(div);
   Polymer.dom(this.$.container).appendChild(domBind);
   Polymer.dom.flush();
}

, ( Polymer 0.5 injectBoundHTML).


, :

...
var self = this;
domBind.externalMethod = function() {
    return self._computeValue();
};
...

, externalMethod, "" "" . _computeValue , DOM attached.

+2

Source: https://habr.com/ru/post/1599037/


All Articles