How to render template without JavaScript in meteor? - javascript

I am using iron:router in meteor. In my case I wanna include Template in an Iframe.
template.html
<iframe src="{{pathFor 'MyTemplate'}}" width="100%"></iframe>
route.js
this.route('MyTemplate', {path: '/MyTemplate',layoutTemplate:'MyTemplate'});
When I render this temple in an iframe. It render with javascript and CSS. I need only css here. Is there anyway to restrict the JavaScript in specific route.

I'm not sure if its quite what you want but you can render HTML without meteor adding the javascript by doing this kind of thing:
Router.route('/MyTemplate', function () {
this.response.end('<html><h1> hello world </h1></html>');
}, {where: 'server'});
});
with that code in the server section.

Related

Problems with vue.js content rendering

I've just learning Vue.js and I'm getting stuck with some problems with its rendering.
Let's say I have the following lines of code:
index.html
<div id="header">
<h5>{{pageName}}</h5>
<p>{{pageSubtitle}}</p>
</div>
app.js
var header = new Vue({
el: '#header',
data: {
pageName: 'CuteCat',
pageSubtitle: 'World of cats'
}
});
When I load the page, the CuteCat and World of cats is shown perfectly but when I view source, this is what I get:
<div id="header">
<h5>{{pageName}}</h5>
<p>{{pageSubtitle}}</p>
</div>
What can I do to replace the mustaches brackets in the view source with its declared value like this?
<div id="header">
<h5>CuteCat</h5>
<p>World of cats</p>
</div>
Just as #yuriy636 is telling you, this is not an error by any means.
Vue is a JavaScript UI framework, making its magic in the client (i.e. in the browser). In the source view you see what's been loaded from the server and what you see is exactly that.
If you disable JavaScript for a session and reload your app, the double mustaches will be visible. Because they are replaced by Vue when JS is on.
Edit: In the DOM, however everything is normal after Vue rendering, just as you would expect it.

Angular: How to implement ng-include like functionality in Angular 5?

Is there any functionality to render html file dynamically inside a components template based on the path? I have the path to local html file now I need to display the content of it inside a components template. In Anular 1.x we had ng-include, any similar functionality in Angular5?
<div class="row blogdetail-container">
{{blogSelected.description}} // currently interpolates the path
</div>
variable blogSelected.description contains the path to html file and I want to replace its content here.
Okay so the only reasonably straight-forward way I can think of to do this is to use an http request to get the contents of the html file then use that in the [innerHtml] attribute.
private dynamicTemplate: any = "";
http.get(blogSelected.description).map((html:any) => this.dynamicTemplate = sanitizer.sanitize(html));
then use
<div class="row blogdetail-container" [innerHtml]="dynamicTemplate"></div>
NOTE 1: remember to include http as a dependency for this component.
NOTE 2: remember to include sanitizer as a dependency for this component
NOTE 3: remember to validate blogSelected.description before calling the http request to check it's actually a valid URL.

src stripped from json html data when using angular.js and angular-sanitize.js

I'm an angular noob here... but enjoying figuring it out. I have simple json file containing text like so:
"gettingstarted":{
"title":"Getting Started",
"content":"<img ng-src='images/pageone-snorkeler.png' width='150' height='107' alt='Snorkeler' /><p>Getting Started...... and a lot of other html in here...</p>"
},"etc..."
I am trying to load images into the rendered html, however, angular seems to be stripping the src and ng-src from my html.
My page.tpl.html file looks like so:
<h1 ng-bind-html="page.title"></h1>
<div ng-bind-html="page.content"></div>
I am loading / using:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.min.js"></script>
I can see all the html render in the page correctly from the json data, however, not the image. It is rendering like so:
<img width='150' height='107' alt='Snorkeler' />
What am I missing to get images to load in my html?
EDIT::::
Looks like I needed to word my question different... I found the answer here: ng-bind-html does not load image src
ng-bind-html-unsafe
...which isn't working for me... or use the fully resolved url: http://superraddomainname.com/image/image.png for example.
ng-bind-html-unsafe has been removed in angular 1.2. What you've done with ng-bind-html should work, you have to make sure you add ngSanitize as a dependency in your app. For example...
angular.module('myApp', ['ngSanitize']);
Demo - Fiddle

Knockout + Ajax Content results in multiple binding error

I have built a web application with multiple pages. Some of them are Knockout-driven.
I am trying to apply some Ajax-optimized page loading and stumble over the following issue.
Say I have the following general page structure
<body>
<div id="content">
</div>
</body>
And the following view, which is using Knockout. I include the call to applyBindings inline for being able to load the right ViewModel for every view.
<section id="editor">
<ul data-bind="foreach: items">
....
</form>
</section>
<script>
ko.applyBindings({items: {}}, $("#editor").el)
</script>
I load the view asynchronously into div#content for example using JQuery.load("editor.html #content")
The first page load works fine, but when navigating away (again using JQuery.load) from this view and coming back again I receive the error:
You cannot apply bindings multiple times to the same element.
I have already tried to apply ko.cleanNode but with no success. What am I missing? The #editor node should be removed from the DOM when other content is shown. So I really do not understand how to clean bindings or reinitialize knockout.
Note: I do not want the old data, I want to initialize the Bindings like on a freshly loaded page
Could you test your $("#editor").el in console? It doesn't work in standard jQuery.
If your $("#editor").el returns undefined, your ko.applyBindings({items: {}}, $("#editor").el) is essentially binding to window.document.body.
You may try
ko.applyBindings({items: {}}, $("#editor").get(0));
...
// call cleanNode before loading new page.
ko.cleanNode($("#editor").get(0));
$("#content").load( "newpage.html" );
if your bindings in "editor" section doesn't change,i suggest you to load(AJAX) only json data from server,and replace(modify) your viewModel in the browser,in that way knockout will refresh the dom automaticly.

What is the way to encode json template to html with angularJS?

I'm a beginner in AngularJS and I try to render a json in html with angularJS but html tags are not encoded. Is there a way to do that with an angularJS method ?
My HTML:
<p>{{template.title}}</p>
My JSON:
{
"title":"try a <br> to break line"
}
My JS:
$http.get(JSON).success(function (data) {
$scope.template = data;
});
Unfortunately, the render display the br tag
Angular wants to bind text as text by default.
In Angular <1.2.0 you need to bind the html unsafe (this can be dangerous):
<h1 ng-bind-html-unsafe="title"></h1>
In Angular 1.2.0 you need to bind the html:
<h1 ng-bind-html="title"></h1>
Dont forget to include ngSanitize to keep your server safe.
Overall, I recommend using Angular 1.2.0 rc2 or later versions as the ngSanitize will keep you safe.

Categories