How to access inner polymer elements from outer polymer element - dart

I want to define a new element <my-table> with can contain a number of
columns <mytable-col>
The usage should look like this:
<my-table id="mt1">
<mytable-col id="c1" title ="name" type="string"width="150"></mytable-col>
<mytable-col id="c2" title ="age" type="number" width="60"></mytable-col>
</my-table>
Is it possible to define an element with another (required) new "inner"
element?
How is it possible to access from the dart code of the outer the markup of
the inner elements instances.
If both the template of <my-table> and <mytable-col> contain markup, where
is the markup of the inner <mytable-col> inserted?

The way you wrote your markup the <mytable-col> elements are children of <my-table> which are added to the <content> node inside your <my-table> element.
You can access those child elements from the code of your <mytable-col> like
var listContent = ($['content'] as ContentElement).getDistributedNodes();
I'm not sure what you mean by
Is it possible to define an element with another (required) new "inner" element?
You can add code in your enteredView() method (after the super.enteredView(); call that verifies that the right child nodes are available in the <content> node and throws an exception if not.
where is the markup of the inner inserted?
The markup is inserted into it's elements shadowDOM.
The markup changes the appearance of your element but is normally not visible,
for example when your open view source from your browser (except when you enable the option to show shadowDOM in Chromium/Dartium or your browser doesn't support shadowDOM then you see how polyfills try to emulate shadowDOM).
You can compare it with tags like <video> where just adding this tag creates many elements (like play-, stop-, continue-, fast-forward- buttons and <span>s and <div>s for the layout that are added behind the scenes which are responsible for the layout and behavior of the <video> tag but are not visible in the markup.

with #Günter Zöchbauer ´s help I found the solution:
As he wrote you can get the inner HTML with:
var listContent = ($['content'] as ContentElement).getDistributedNodes();
Because this only finds Nodes with an id, you have do define the Element in the Component´s HTML with an id too.
<content id = content><span>inner HTML</span></content>

Related

rerendering Template Tags in Dart

I have been all over their github, their website, as well as other sites.
The closest answer I can see is related entirely within PolymerJs, which was in another stack overflow thread.
var template = document.querySelector('template'); // Use specific selector here
template.iterator_.updateIteratedValue(); // Force Polymer to refresh template
but when I looked up the TemplateElement class, i did not see any sort of redraw methods, or signuatures which jumped out at me.
Ideally i have something like this:
<template is="dom-repeat" items="{{days}}">
<div>{{item.name}}</div?
</template>
but when I change days, maybe adding another element to it, or deleting from it, it doesnt rerender the template. What i was doing was as simple as:
List newArray = [];
set("days", newArray);
or something like:
set("days", days.map((Map m){ m['times'] = sampleTest.split(''); return m;}).toList());
For adding a new element to the list that will trigger refresh on dom-repeat, use
add("days", day);
where day is the new element to be added onto the list.
For removing an element from the list that will trigger refresh on dom-repeat, use
removeAt("days", i);
where i is the index of the item on the list.
Alternatively, call removeAt() in a loop to remove everything and then call set("days", list), where list MUST be a new instance of List.

how to track the social media icons using DTM (Dynamic tag manager)

I have the below code in my web site.
I want to track each anchor tag using DTM. I know how to track single element. Since here we have a bunch of different elements, can anyone help how to track them using DTM? I don't want to create separate rule for each element. In a single rule how can we track these elements.
Here is an example of what you can do.
For Element Tag or Selector put "a.at-share-btn" (no quotes). This will target all the relevant links first. We can look for this too in the next step, but "pre-qualifying" it with this will improve performance so that the rule is not evaluated against every single a click.
Then, under Rule Conditions, add a Criteria of type Data > Custom.
In the Custom box, add the following:
var shareType = this.getAttribute('class').match(/\bat-svc-([a-z_-]+)/i);
if (shareType&&shareType[1]) {
_satellite.setVar('shareType',shareType[1]);
return true;
}
return false;
This code looks for the class (e.g. "at-svc-facebook") and puts the last part of it (e.g. "facebook") into a data element named shareType.
Then, you can reference it using %shareType% in any of the DTM fields. Note: because this data element is made on-the-fly, it will not show up in the auto-complete when you type it out in a field.
Alternatively, in custom code boxes (e.g. if you are needing to reference it in a javascript/3rd party tag box), you can use _satellite.getVar('shareType')

Considering an element only if its a child of another element

For example :list-view and list-item
I use them as:
<list-view>
<list-item><list-item>
<list-item><list-item>
<list-item><list-item>
</list-view>
But how do i make <list-item> element valid if and only if its a child of <list-view>?
is there a formal way to do this in polymer?
to make it more clear sometimes i create polymer elements that are intended to be used inside and only inside another polymer element
So, the short answer here is no. I think as a general rule, the element shouldn't have to know anything about its parent elements. You can have a parent element that only displays <list-item> children, but does it add anything to have a <list-item> that won't appear outside of a <list-view>?
To take an example from vanilla HTML, an <option> only really makes sense inside a <select>, <optgroup> or <datalist> element, but you can put one in elsewhere and the browser doesn't complain. Likewise, if I include a <source> tag outside of a <video>, I don't see a console message (at least on Chrome and Firefox).
If you want to do something special in this case, you can check the parent node in the attached callback. Something like:
attached: function() {
if (this.parentNode.localName !== 'list-view') {
...
} else {
...
}
Of course, if you do this, and next week you come up with an awesome <grid-list-view> that could re-use your original <list-item>, you need to go back and change your list item. So I would use this pattern with caution and only if you see a tangible benefit to restricting where your component can be used.

does shadowdom change the rules for ids

The answer to question Cascading style sheets use "id" or "class" says for id's
Put an ID on an element if "it is the ..." (e.g. navigation)
and a further comment:
Because of this ids can only be used once (in the page) but elements can be classified multiple times. Also an element can only have one identifier but multiple classifications. However elements can be identified and classified.
With shadow dom, does the part about ids can be used once (in the page) still hold? For example, a simple way to grab elements in the component is to give each id's unique to the component and query them:
In html:
<input id="amount" placeholder="Amount" on-change="{{recalc}}"></input>
<input id="term-years" placeholder="Term (yrs) e.g. 30" on-change="{{recalc}}"></input>
<input id="rate" placeholder="Interest Rate" on-change="{{recalc}}"></input>
In Dart code:
termYearsElm = shadowRoot.querySelector('#term-years');
amountElm = shadowRoot.querySelector('#amount');
rateElm = shadowRoot.querySelector('#rate');
In playing with this, multiple instances of the component do not conflict. Is this approach safe or a bad idea? If it is safe then have the rules for ids have changed?
Yes it is perfectly legitimate to use an ID on an element of a component as long as it is 1) Unique to that component, and 2) The component has a shadowDOM. The shadowDOM encapsulates your components from each other. Thus you can have a component with id rate and it is used only once within that component. Even if you use that component multiple times within the same page the id's are encapsulated from each other.
Just a quick FYI as well, you can also use the $[] accessor for a shortened form. Dart code:
termYearsElm = $['term-years'];
amountElm = $['amount'];
rateElm = $['rate'];

Dynamically Loading LI's in JQueryMobile 1.0

I've just updated my project from jquerymobile 1.0a1 to version 1.0.
I've encountered a problem with dynamic content. Based on an ajax search I populate an unordered list with list items. Previous the following code refreshed the list so that all the styling appeared correctly:
$('#myContent').find("ul").listview();
$('#myContent').find("ul").listview('refresh');
However as of 1.0 this no longer seems to work.
The list appears but the styling is all wrong and the data-theme on all the elements gets ignored.
Has anyone come across a similar issue with updating and come across the solution.
Updating lists If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create
any nested lists that are added. For example:
$('#mylist').listview('refresh');
Note that the refresh() method only affects new nodes appended to a
list. This is done for performance reasons. Any list items already
enhanced will be ignored by the refresh process. This means that if
you change the contents or attributes on an already enhanced list
item, these won't be reflected. If you want a list item to be updated,
replace it with fresh markup before calling refresh.
http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html
if #myContent is the listview you can do this:
$('#myContent').listview('refresh');
if #myContent is the page you can do something like this:
$('#myContent').trigger('create');
Create vs. refresh: An important distinction Note that there is an important difference between the create event and refresh method
that some widgets have. The create event is suited for enhancing raw
markup that contains one or more widgets. The refresh method should be
used on existing (already enhanced) widgets that have been manipulated
programmatically and need the UI be updated to match.
For example, if you had a page where you dynamically appended a new
unordered list with data-role=listview attribute after page creation,
triggering create on a parent element of that list would transform it
into a listview styled widget. If more list items were then
programmatically added, calling the listview’s refresh method would
update just those new list items to the enhanced state and leave the
existing list items untouched.
http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
What you want can be achieved by replacing your 2 lines of code with the following:
$('#myContent ul').listview('create');
Hope this helps...
I've had this issue. The reason you are getting things all messed up is you are initalizing and refreshing the element multiple times. I noticed I had 2 different functions running that would call .listview('refresh') on the same element. After I took one out the themes and data went back to looking normal. Also are you getting any JS errors?
EDIT:
To be more specific you are calling .listview() somewhere in your code 2 times which is initializing it twice. I would wait to before you page is loaded to run the refresh so you only call it once.
Another thing you could do is check if the element is initialized already or not so you don't do it twice. Just check the element or in some cases the parent to see if the class ui-listview is present.
var element = $('#myContent').find('ul');
if ($(element).hasClass('ui-listview')) {
//Element is already initialized
$(element).listview('refresh');
} else {
//Element has not been initiliazed
$(element).listview().listview('refresh');
}
Just an FYI you can chain those events to look like $('#myContent').find('ul').listview().listview('refresh');
It cand be achived through.
$('#myContent').listview('refresh');
The below snippet shows you to load data from xml and dynamically create a list view.
function loadData()
{
$.ajax({
url:"BirthdayInvitations.xml",
dataType: "xml",
success: function(xml)
{
$(xml).find("event").each(function()
{
$("#mymenu").append('<li>' + this.textContent + ' </li>');
});
$("#mymenu").listview('refresh');
}
});
}
See if this is related to ur question http://www.amitpatil.me/demos/jquery-mobile-twitter-app/ and this one also http://www.amitpatil.me/demos/ipad-online-dictionary-app/
In first example i am using listview('refresh'); method and in second example i am using
$(document).page("destroy").page();

Resources