I have this small code that gets rendered the first time the page loads.
<div id="old-div">
<h2>{{description}}</h2>
<h2>{{example}}</h2>
</div>
Now the second time, an AJAX call happens and since first time the {{description}} and {{example}} are already filled, when i try to get the HTML of the template, instead of {{description}} and {{example}}, i get their values.
I don't want Handlebars to render the values to the expression when ajax call happens to that i can get the template and render new values.
Any help is appreciated.
Make a template, put it outside html <body> and use that to feed handlebars. You will be able to take it, feed handlebars and append to DOM with substituted values and retrieve the template itself (you can use <template> tag for it or <script> and add id attribute to reference it easily. That's how it's done on many websites.
I would suggest you to have a separate handlebar div for compilation purpose and use that compiled HTML to append in your appropriate div so that you don't override your handlebar code in HTML.
Related
I was going through some tutorials for vue.js front end framework when i came across <template>tag being used in html code at a lot of places:
<template v-for="(choice,index) in choices">
<h1>{{ choice }}</h1>
<p>{{ index }}</p>
</template>
I wanted to know what exactly is the purpose of this element. Is it something usually used in front end development?
The <template> element in general
The HTML Content Template (<template>) element is a mechanism for
holding client-side content that is not to be rendered when a page is
loaded but may subsequently be instantiated during runtime using
JavaScript.
Think of a template as a content fragment that is being stored for
subsequent use in the document. While the parser does process the
contents of the <template> element while loading the page, it does so
only to ensure that those contents are valid; the element's contents
are not rendered, however.
##The <template> element in Vue.js
You can find more information about it in the Vue.js guide. For example, in the context of v-if.
Conditionally render the element based on the truthy-ness of the expression value. The element and its contained directives / components are destroyed and re-constructed during toggles. If the element is a <template> element, its content will be extracted as the conditional block.
What that means exactly can be seen in this example:
<div v-if="true">Foo</div>
<template v-if="true">Bar</template>
which will result in:
<div>Foo</div>
Bar
The <template> element will not be part of the DOM after if has been processed by Vue.js anymore. The same applies when using the v-for directive on <template>.
See MDN:
The HTML Content Template (<template>) element is a mechanism for
holding client-side content that is not to be rendered when a page is
loaded but may subsequently be instantiated during runtime using
JavaScript.
Think of a template as a content fragment that is being stored for
subsequent use in the document. While the parser does process the
contents of the <template> element while loading the page, it does
so only to ensure that those contents are valid; the element's
contents are not rendered, however.
or the HTML specification:
The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script.
In a rendering, the template element represents nothing.
I have a list of posts which loads perfect, the entire content of each post. The html post content is a string in database column. Now I want to create a read more link at the position that I desire and only show a post preview in the list (a part of the html content). To accomplish that I write a comment inside the posts it´s the point to cut the content in order to preview.
How can I manipulate the content before the ng-bind-html loads it? I need to detect the first comment and clean the content html document. I´m making tests in jquery but i would like to know how to do it on the angular way.
I think that a filter inside the ng-bind-html expression can do the work. But i don´t now how to manipulate the html string inside the filter. Manipulate like jquery syntax because i need to remove a lot of tags and do some stuff.
<script>
$(function() {
var com = $("*")
.contents()
.filter(function(){ return this.nodeType == 8;})
.first();
com.nextAll().remove();
});
</script>
Thanks
You can add a function that will be executed during ng-bind-html and get access to your string by using sanitise service $sce. See the details on $sanitise service.
Inside the ng-bind-html you can manipulate the DOM using jqlite and native javascript (by using $document wrapper). If the manipulations are too complex, I'd use jquery directly. To do that you have to just include it before angular in your index.html and use angular.element instead of $
I am learning AngularJS by decomposing code samples and putting them together in different ways. What specific changes need to be made to the code in this plnkr so that code from an external script can be called from the index.html view?
The code is from this tutorial, and the change that I want to make is simply moving the JavaScript code to an external JavaScript file that is called from inside the view.
First I changed the scripts tags to be like in the example you linked to.
Second, I added ng-app="helloApp" attribute to the html tag, so the helloApp angular module you defined will run on the html element (instead of not running at all).
Third, and lastly, I changed Calvin Hobbes on line 42 to be {{name}}, so it will be binded to the $scope.name var in your controller, instead of being a regular static text.
Here is a working example.
I've a html template that's been compiled and added to my dom via an append function. However it is not possible to change the style of the template objects because I have to wait till they are completely rendered in the dom. How is this possible?
My method call looks like that at the moment:
angular.element(document.getElementById('htmlContent')).append(app.compile(template)(app.rootScope));
I want to pass as argument a large (maybe 2-3 paragraphs of html formatted code) chunk of HTML code to a Javascript function call from HTML. The problem is, the formatted HTML keeps appearing in the page itself, which shouldnt be the case ! I am assuming theres some problem with single/double quotes !
And, I am working on Facebook tab page.
Can anyone please help me ?
Thanks.
-
ahsan
One way is to have a hidden div (something with display:none), and populate that with your 2-3 paragraphs of html formatted code. Then, you can just pass the innerHTML of the div into your function. Quotes (of any kind) won't cause a problem in this method.
Some libraries like icanhaz.js also do something like this:
<script type="text/html" id="someHTMLTemplate">
<div>You can put whatever html you want here</div>
<p>And the browser just ignores it</p>
</script>
I use the same technique with mustache.js and then grab the template from the innerHTML of the script tag after grabbing it by the dom id. This has the advantage that the browser doesn't have to parse your extra html while loading it is just parsed when you need to display it in another node on the page.
Another way is to encode the HTML and then decode it in the JS. Here's an example using the JS escape info:
console.log(escape("<hello></hello>")); // %3Chello%3E%3C/hello%3E
console.log(unescape("%3Chello%3E%3C/hello%3E")); // <hello></hello>
Mind you, if you have an issue with your string quotations to begin with, then there will still be a problem encoding.