While idly browsing the DOM specification, I came upon this passage:
Elements have an associated namespace, namespace prefix, local name, custom element state, custom element definition, is value. When an element is created, all of these values are initialized.
Looking at other parts of the specification, I learned that it is apparently supposed to be a string value or null. However, I have not been able to find out what is it actually supposed to be used for.
Of what use is this concept?
Related
In Dash, by Plotly helping section in Callbacks https://dash.plotly.com/interactive-graphing it is stated that:
Dash components are described declaratively by a set of attributes. All of these attributes can be updated by callback functions
Using the definition of What is the difference between properties and attributes in HTML?:
Attributes: Attributes are defined by HTML. They initialize DOM properties and then they are done.
Properties: Properties are defined by the DOM (Document Object Model). After DOM has been fully initialized these properties can change.
It is logic and reasonable to say that Dash Callbacks retrieve a specific DOM object by its id, and 'read' its property (not the HTML attribute that initialized it). Example: it is possible to have an Input Callback listening to a graph figure 'hoverData' change property.
If this assumption is true:
So basically dash Callbacks operate after the DOM has been initialized, also again they operate on DOM properties not HTML attributes.
So again if true case this could be clearly stated in documentation which would improve to avoid developers confusing this sometimes not very obvious terms.
Have found an answer, dash callbacks work with DOM Properties which is more accurate than saying HTML attributes.
I want to create a .png file of a HTML page in angularjs and download it. For this I'm currently using dom-to-image.js and using the domToImage.toBlob function and passing the node element to it. But internally when it goes to dom-to-image.js it throws the error:
node.cloneNode() is not a function
Can anyone please assist me here?
Thanks
This error arises when you attempt to call cloneNode() on anything other than a single DOM node.
In this case, the error is coming from the dom-to-image library, which calls that method internally.
Note that without a code snippet, its hard to identify the precise issue with your code, but the point is, when you call domtoimage.toBlob(), you need to supply a single DOM node.
So double check what you are calling it with. If you are selecting by class, for instance, you could end up with more than one element.
Its best practice to be precise with which node you want to convert to a blob - use the id attribute, like this:
domtoimage.toBlob(document.getElementById('element')).then(...)
where element is the id of your target node.
Its also possible you're selecting with angular.element() or even using jQuery directly.
In both cases, this returns an Object -- which you can't call cloneNode() on.
Also note the following from the Angular docs for angular.element():
Note: All element references in AngularJS are always wrapped with jQuery or jqLite (such as the element argument in a directive's compile / link function). They are never raw DOM references.
Which means you would observe the same behavior in both cases, e.g. both of these:
domtoimage.toBlob($('#element')).then(...)
domtoimage.toBlob(angular.element('#element')).then(...)
would result in the error you see. You can index the Object before supplying it to domtoimage.toBlob(), perhaps like this:
domtoimage.toBlob($('#element')[0]).then(...)
domtoimage.toBlob(angular.element('#element')[0]).then(...)
and that would also work.
Also check out this post about "cloneNode is not a function".
I would like to append a Binding node to another Binding node without re-rendering the parent node.
Is there a specific way how Binding.scala would handle this?
Bindings can be nested and composed, so in general it's not something you need to think about. A Binding[T] represents an object that is dynamically bound and will be recomputed when any upstream Binding's value changes.
Your question is a bit ambiguous so you may want to clarify or add a code example, but there is nothing extra you need to do to accomplish your goal. Look at the examples and also this section of the README:
https://github.com/ThoughtWorksInc/Binding.scala/blob/11.0.x/README.md#precise-data-binding
Also, I made a quick example of what I'm talking about here:
https://scalafiddle.io/sf/XZgtwHM/1
If you open up your browser console, you'll see that the method that renders out the parent node is only called the first time, but if you click the button more child elements will be appended without the parent node being affected. Inspect the HTML and pay attention to the id of the parent div, it is set up to increment the ID each time it gets rendered, and the id remains as "parent_1" the whole time.
When using TemplaVoila, the template data structure is mapped to the HTML template file by pathes like
body[1]/INNER|div.grey[1] div.content_area[1] div.left_column[1] div.left_content[1]
while this is obviously as precise as possible, it is not very effective, because every change to an DOM element above the mapped one would break the mapping, which happens quite frequently and is totally pointless. I like to patch TemplaVoila to rely on the last matching path segments only, which will suffice in almost any condition, as my HTML is always tagged by id's or classes on the mapped elements.
For the start, it would be cool if it would maybe just use
.left_content[1]
instead of the path shown above. But maybe it don't work in a matching fashion like CSS selectors do.
I just can't figure out where to start. Can this be done by TS config? Are changes to TemplaVoila's PHP needed? Can a new extension do this?
Add an unique class or even better id to the desired element, so you won't need to count the occurrences. TemplaVoila hasn't possibility to use CSS-like selectors first, last etc.
The mapping does not rely on the full path, but tag name and id, if the element mapped has an id attribute set.
Having an (even unique) class attribute only forces TemplaVoila to map the absolute element path, as classes are not necessarily unique.
So no special configuration is needed, if all mapped elements have unique id attributes set.
In the 1.5.2.3 Defining a Binding Path section of OpenUI5 demokit:
A context exists either for each entry of the aggregation in case of aggregation binding or can be set explicitly for a control by using the setBindingContext method.
In the 1.5.3.3 Element Binding section of OpenUI5 demokit:
Element binding allows to bind elements to a specific object in the model data, which will create a binding context and allow relative binding within the control and all of its children.
It seems to me that the two techniques actually do the same thing. They both create a binding context for a control so that bindings of the containing controls will resolve relatively to it. But what's the difference between them? In what scenario will either of them come into play?
The setBindingContext doesn't work in the following code:https://jsbin.com/bigope/edit?html,output
However, if I change oPanel.setBindingContext("/nameinfo"); to oPanel.bindElement("/nameinfo");, it works, why?
setBindingContext requires you to pass a Context like this:
oPanel.setBindingContext(new sap.ui.model.Context(oModel, "/nameinfo"));
The difference between those two is conceptual.
The Binding Context is used as a parent context for all bindings (for that model) in that Control or its children. It only holds a reference to the used model, (a part of) the path and optional another parent context. It is used when creating relative bindings.
The bindElement method on the other hand behaves like every other bind* method.
It creates a binding (in this case, a ContextBinding) which allows change events, data binding, etc.
Additionally the created ContextBinding also serves as a BindingContext for other bindings, just like a Context added with setBindingContext would do.
Not confusing at all, right ;)?
Reading the code for ManagedObject might help you to understand the internals better. (bindObject = bindElement)