Develop Reference

NativeScript: How to get all elements having a certain class

I want to get all elements in my XML (NativeScript with Vue) that have the same class. Is this possible?
As an extension, is it possible to add custom attributes to existing controls like the TextField (similar to data-* attributes in HTML), and if so, is there a selector that I could use to get all elements having the same data- attribute? (For example, the HTML/CSS equivalent would be something like input[data-customerid="12"])

If you are looking for something like document.querySelector(...), there is a paid plugin - nativescript-dom. FYI, you might find the free / unmaintained version on Github, which is not guaranteed to work with {N} v6.x or later.
If you are looking for Attribute CSS selectors, that's supported out of the box. And Yes, you can add custom attributes in XML.

customizing html templating in bootstrap tags

I'm taking a looking at bootstrap tags found here: http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
I'd like to be able to hook into the HTML that's being rendered to add additional anchors/links to the tags being generated. There is an event named: beforeItemAdd() that allows you to see the item before it's added, but you can't necessarily interact with it other than prevent it from being rendered.
Is there a way to customize the HTML output here so I can add additional links besides the 'x' to my tag? Just applying a CSS class won't work, I need to be able to modify the actual markup being rendered so I can add content to the tags.
Alternatively, I'm open to a solution with tagging that allows for the customizing of tag HTML rendering.

Without digging really deep into the plugin source ( I've never used this plugin), or figuring out what data is stored, one way would be to use this in the event callback to traverse to the main container the plugin wraps everything in and then find the tag elements.
Add a class each time and then you know what you have already modified and the one without that class would be your new one
$('input').on('itemAdded', function(event) {
var $cont = $(this).siblings('.bootstrap-tagsinput'),
$tag = $cont.find('.tag').not('.modified').addClass('modified');
$tag.doSomeStuff();
});

Is it mandatory to use document.registerElement()?

I'm using custom HTML tags such as <custom-element> for semantic convenience and styling those using CSS. I'm also using the tag name as a selector for jQuery such as $('custom-element').
I've removed document.registerElement('custom-element') from my code, and everything works as expected in Chrome.
Is it mandatory to use document.registerElement('custom-element') even if I'm not using any Javascript with those custom elements (except for the jQuery selector)?

The only thing registerElement does is allow you to create objects of the new element programmatically via constructor as opposed to by using createElement. This enables you to also add a prototype to the element, or extend an existing element, which AFAIK you can't do with createElement. You don't need to register custom elements if you don't need one of these three things (a constructor, the extension of an existing element, a prototype).

Are there javascript template engines that support something like recursion?

The most obvious example I can think of is for outputting nested comments. Let's say you have a tree of comments and you want to output it as nested html (let's say lists inside lists or divs inside divs) using your template.
The "comment" block/function/tag/helper/whatever would have to be able to call itself somehow for the comment's children.
Are there template engines that would support that sort of thing inside one template file?
I am aware that you can just pre-compute the "indent" or "depth-level" of each comment and send them to the template as one flat list in the correct order, but let's just say I don't want that. And let's say I don't want to stitch snippets together in code / outside the template - I want the whole page self contained in one template or theme file.
Update: I want to generate nested html. I want the comments to be nested, not appear nested. I know how to indent things with CSS. :) Whether it is done in the browser or on the server is irrelevant because the point is I want the template to be self-contained in one file.
As in:
var html = render(template, {comments: aTreeOfNestedComments});
(see? that could be node.js, a brower plugin, some "jQuery" as some people like to call javascript these days...) It looks like jade can do this using mixins. Any tag-based templating engines that can do something similar?

Template engines can solve generic, run-off-the-mill problems. While nesting templates seems like a common use case, I haven't encountered many template engines who can do that.
Since the market didn't offer a good solution, I'm building my applications from JavaScript objects that know how to render themselves. I never use templates; every block gets a reference to the DOM (like the parent element to which is should attach itself) or the renderers return the child container and the parent element can add that in a suitable place.
This allows me to use the full power of JS without the limitations of template engines.
[EDIT] Here is a workaround: If you need a recursive element, add a span (if the recursive element should be inline) or div (if it's a block element). Give it the class recursiveTemplate and a data attribute data-template-name="..."
Run the template with your standard template engine. Afterwards, use jQuery or the like to find all elements with the class recursiveTemplate and replace them yourself.

Distal templates has an example here of a nested tree:
http://code.google.com/p/distal/wiki/UseCaseExamples#Building_a_nested_tree

as #TJHeuvel said, you can use the server side script to produce the desired otput, this would be the best way to do what you require. However if you must use JavaScript, I would advise jQuery this will also allow you to product the desired result.
for example:
$("ul li").css("margin-left", "10px");

A convention for indicating whether an HTML element is referenced from JS code

This is a follow-up question for In jQuery is it a bad idea to use name=X for all selectors?
I am using Backbone and decided that I wanted a way to differentiate between HTML elements that were bound and those that were not.
So I would write (in HAML):
.container
.title(name='title')
.separator
As you can see it's clear that the dynamic element is title.
The reason for this was so I could mess around with the style and rename classes without worrying about breaking the app. It also means in the template I can tell what the dynamic elements are without needing to go back and forth with the Backbone View.
My question now is, without using the [name] selector, does anyone have a code convention to keep track of which HTML elements are referenced from JS.
I have considering:
Using a common prefix on class names (e.g. class=bind-title)
Using some sort of custom HTML element (
Thanks!
FYI: I'm using CoffeeScript, Backbone and haml_coffee templates.
Updated jsperf to test all suggestions:
http://jsperf.com/class-or-name-attr-lookup/3

I would consider using a class to indicate that it is dynamic.
I'm not sure if you are aware of this but you can have multiple classes on one element. Like so:
.container
.dynamic.title(name='title')
.separator
This works in traditional HAML but I have not tried it with haml-coffee. If it doesn't work, you might have to specify the class like .title{:class => "dynamic"}(name='title').
I prefer this over a prefix on the class name because it's more semantically meaningful, which is how HTML should be used.

I am using data-view attribute on elements being set when rendering my Views.
This helps me to then show a tooltip in a browser window when I hover over View(s).