Develop Reference

Set HTML template tag content without JavaScript selectors

Let's say we have the following HTML template:
<template id="my_template">
<div>
<h4>Test Titel</h4>
<div class="row">
<label for="someinput">Stichwort:</label>
<input id="someinput" type="text"/>
</div>
</div>
</template>
Now I like to render a list with multiple items based on that template.
I know that we can just clone the template and use selectors on it as on a regular DOM.
But is there also an alternative way to clone, etc... but with data, so that we can set the content without using selectors, but variables?
Something like the following, we just declare the variable ID before adding the template?
<template id="my_template">
<div>
<h4>Test Titel</h4>
<div class="row">
<label for="someinput_${ID}">Stichwort:</label>
<input id="someinput_${ID}" type="text"/>
</div>
</div>
</template>
I know it is possible with template literals, but I am just curious if this also works in any way with theses handy template tags?
Is it at all possible to set data in a temple tag without using selectors on it?

Is it at all possible to set data in a temple tag without using sectors on it ?
No, not in the way you mean. (The literal answer to the question quoted above is "yes" but only because you can modify the DOM without using selectors, per se — by doing the DOM traversal yourself. Not a useful "yes." 🙂 )
HTML template tags don't have an "evaluate with these variables" method or similar. As you've said in the question, you could always write a function that uses a JavaScript template literal to build the HTML instead (and then use insertAdjacentHTML() or innerHTML to add it to the DOM).

Is there a v-cloak inverse?

According to VueJS documentation, v-cloak "directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.". In other word, I can hide a div or something like that, and it will be displayed when vue is ready.
Does VueJS provides its inverse? Something that hides until VueJS is ready?

As simple as:
<div v-if="false">Will be visible until vue is mounted/ready...</div>
Work for all versions.
The element has to be inside your container... if you use to hide your master container, change it that way:
<div id="app">
<div v-if="false">Visible while loading...</div>
<div v-cloak>Visible when ready...</div>
</div>

There plenty of solutions, I think another one will be to use v-if with a false property in data like:
<div v-if="false">Loading Vue....</div>
<div v-cloak>vue loaded</div>

#Angular2 How i can count numbers of custom attribute directive?

I made a custom attr directive and i will use it in siblings elements like:
<div>
<div [customAttrDirective]="'value'">1</div>
<div [customAttrDirective]="'value'">2</div>
<div [customAttrDirective]="'value'">3</div>
<div [customAttrDirective]="'value'">4</div>
</div>
I olso made a service that control all of my directives. Inside this it I want to know the count of my directives customAttrDirective.
PS: I can't do it by searching by class name(because i add classes inside the directive) and i can't do it by searching by attribute (directive name) because angular change.
Edit: replaced wrong sintax customAttrDirective="'value'" to [customAttrDirective]="'value'"
Many thanks.

Assuming your custom attribute directive's class name is CustomAttrDirective, in the component that you are using your custom directives, add this:
#ViewChildren(CustomAttrDirective) dirs: QueryList<CustomAttrDirective>
Then in life circle ngAfterViewInit, get the length of variable dirs.

VueJs Conditional handlebars

I'm trying to use VueJs conditional rendering using handlebars in vueJs 2.0 as per their documentation but eslint is coming back with and error:
- avoid using JavaScript keyword as property name: "if" in expression {{#if ok}}
- avoid using JavaScript keyword as property name: "if" in expression {{/if}}
VueJs does not seem to be rendering it.
<!-- Handlebars template -->
{{#if ok}}
<h1>Yes</h1>
{{/if}}

If you are trying to use Vue.js syntax, the documentation outlines just a few lines down what's done for Vue.js. You would use the v-if directive.
<h1 v-if="ok">Yes</h1>
If like you mentioned, you're wanting to use Handlebars alongside Vue.js, note that both of them use the same {{ curly braces in templates. You may need to change Vue's use of the curly braces like so...
Vue.config.delimiters = ['<%', '%>'];

Either:
Using v-if to conditionally render
<h1 v-if="isVisible"> Yes </h1>
or using v-show to add a hidden attribute to that element style
<h1 v-show="isVisible"> Yes </h1>
either can be used but be careful with v-if since the element won't be in the DOM if the condition is not met.

I believe that is simply to document that the conditional does not go on a parent tag, but rather it is placed directly on the node that you want to conditionally display.
In other words its simply a comparison not part of Vue.js markup, but rather part of Handlebars.

Vue conditional rendering syntax
<h1 v-if="ok">Yes</h1>
<h1 v-show="ok">Yes</h1>
Details in original docs.
https://v2.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

Firstly, You should look at the vue documentation .https://v2.vuejs.org/v2/guide/conditional.html#v-if-vs-v-showjs and by the way, you can use "v-if" and "v-show"attributes, in flowing related to
examples.
<h1 v-if='isShow'>Test</h1>
<h1 v-show='isShow'>Test</h1>

For anyone coming here from a search trying to conditionally render inside {{ }} braces, you could always use a computed property:
import { computed } from 'vue';
<script setup>
const submitButtonText = computed(() => {
return props.formObject ? 'Save' : 'Create';
});
</script>
<template>
<form>
<button type="submit">
{{ submitButtonText }}
</button>
</form>
</template>
v-if and v-if-else work perfect for large elements, but this is great for simple one-line conditional text.

AngularJS - Is it possible to use ng-repeat to render HTML values?

I'm using AngularJS with a third party service that generates html responses. I want to use ng-repeat to render the HTML responses as a list, however Angular renders it as text.
Is it possible to use ng-repeat to render HTML property?
I've created this jsFiddle to demonstrate my issue.
http://jsfiddle.net/DrtNc/1/

I think using ng-bind-html-unsafe will get you what you need.
<div ng:repeat="item in items" ng-bind-html-unsafe="item.html"></div>
Here's a working fiddle: http://jsfiddle.net/nfreitas/aHfAp/
Documentation for the directive can be found here: http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe

The way I achieved this is by ng-bind-html inside the ng-repeat;
<div ng-repeat="comment in comments">
<div ng-bind-html="comment.content"></div>
</div>
Hope this helps someone!

item.html will always be interpreted as text. you have to convert it to html explicitly. click here
I have added a render function which will convert each string to html.