Develop Reference

Pass variable from one html file to another

I'm creating an Angular 2 webpage - I originally had 1 HTML file that contained everything I needed for my web page's UI - for design reasons, I've taken out a part of the HTML and created a separate component for it (specifically a Tree view display). I've been able to reference the other HTML file (treeview) fine using its selector tree-selector in my original HTML like so:
<div *ngIf="showTree">
<h1>Using treeview template.</h1>
<tree-selector></tree-selector>
</div>
The code for tree-selector.html is (I'm using PrimeNG UI components):
<p-tree [value]="fileSystemTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)" (onNodeExpand)="nodeExpand($event)" [style]="{'max-height':'200px','overflow':'auto'}"></p-tree>
Before, when everything was in 1 file, it was easy to use the variable "fileSystemTree" to use for [value]. Now that I have two HTML files, I'm unsure of how to use fileSystemTree again in my main HTML and link it to [value] in tree-selector.html.

Pass it to <tree-selector></tree-selector> as input parameter and then further to <p-tree...>
<div *ngIf="showTree">
<h1>Using treeview template.</h1>
<tree-selector [fileSystemTree]="fileSystemTree"></tree-selector>
</div>
in tree-selector component:
#Input() fileSystemTree: any;

Dojox/app: Is it possible to define views programatically

Is it possible to code a view programatically instead of using an html template? All the demos I have seen use an html template.

Yes it is possible.
Add your HTML markup as a string for property templateString,
the following code does not use an .html template as for your question.
You can use string concatenation in order to modify your template programatically.
More information on templateString here.
Example below is taken from user Ben from this answer to a my older question:
require(['dijit/_WidgetBase', 'dijit/_TemplatedMixin', 'dojo/_base/declare', 'dojo/domReady!'], function(_WidgetBase, _TemplatedMixin, declare, domReady) {
//Foo represent any widget with template available in dojo
//replace by the widget you want to use
var Foo = declare([_WidgetBase, _TemplatedMixin], {});
var foo = new Foo({
templateString: '<div>This is my teemplate and ${bar}</div>',
bar: "this is added to the template"
});
foo.placeAt('layout');
});
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen">
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<div id="layout"></div>

You can also use placeholder's in your HTML template having defined basic tag structure in template and providing value's to the placeholder from JS side.
Ex:
<div>
<div data-dojo-type="dojox.layout.contentpane" >
{content}
</div>
</div>
OR
You may also modify some HTML template dynamically from "postMixInProperties()"
Refer to Widget Life cycle to get some info on that
http://dojotoolkit.org/reference-guide/1.10/dijit/_WidgetBase.html

Are'nt we Allowed to write html codes if we use backbone.js?

I am learning backbone.js and I have seen some examples like this one.Here the user has not written much html codes inside the editor.html.Only 4 lines of code.But for colour change,size change etc he has done inside editor.js
Please help me understand what all codes we need to keep inside .html file
<div id="page" style="width:2000px;height:2000px;">
<button id="new-rectangle">New Rectangle</button>
<button id="new-circle">New Circle</button>
</div>

You should aim to put all your html in .html file(s). As an app grows, it will help you to keep them separate. The example you link to is a 'simplified' version - this is not how you would structure things in an actual app. You would load html from templates in the render function. A (though this is also simplified as I am relying on script tags) pattern would be:
HTML file:
[...SOME HTML...]
<script type="text/html" id="template-contact">
<div class='contact'>
<h1>Here's my template code</h1>
<strong>name</strong>
<span>email</span>
</div>
</script>
Then in your Backbone view render function:
render: function() {
template: _template($('#template-contract').html(),
this.$el.html(this.template());
return this;
}
Then somewhere else in your Backbone code you create a new instance of the view and render it.
var example = new view_name();
example.render(); //This loads the html template
If you need to dynamically load the html from a server, you can use underscore (or whichever template engine you are using) tags in your template '<%>' and use models. This is best explained in Addy Osmani's book Developing Backbone.js Applications which, incredibly, is free. Here's the link to the relevant section

Whatever you wants to display on the browser you can keep it in .html file and logic to update the dom on run time should be in .js file.

Dojo HTML template: repeating a piece of HTML inside the HTML template

I have a template based dojo widget, and a HTML template for it, in a separate .html file.
The Dojo Widget:
define("dojow/SomeWidgetName",[
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/MyHTMLFile.html"], function(declare, _WidgetBase, _TemplatedMixin, template) {
return declare([_WidgetBase, _TemplatedMixin], {
templateString: template,
baseClass: 'dojowBaseClass',
details:{} // THIS IS THE OBJECT THAT WILL BE LOOPED
// your custom code goes here
});});
The HMTL template:
<table>
<tr>
<td>SomeService</td>
<td>someUsername</td>
</tr> </table>
What I need is to repeat the row of the table based on the "details" object I am having inside the dojo widget, so each row contains data from that object. Is that possible?
Thanks.

As far as I know: no. The templating language of Dojo is very basic and just offers attach points/events that you can use to programmatically change it. It's one of the shortcomings/weaknesses of Dojo (compared to templating engines like Handlebars), even ex-core-commiters think that way.
So, an alternative approach to create a loop structure is programmatically creating one. Let's say our template is the following:
<ul data-dojo-attach-point="listNode"></ul>
Then you can do the following in your code:
domConstruct.create("li", {
innerHTML: "test"
}, this.listNode);
That will result in the following HTML:
<ul data-dojo-attach-point="listNode">
<li>test</li>
</ul>
So you can put that inside a loop in your code (and create many child items), but as you can see, the template language itself is lacking such a feature.
If you want to load "a template", you can define a child item template, and load it using:
domConstruct.place(lang.replace("<li>{text}</li>", {
text: "test"
}), this.listNode);
Small note: The dojo/_base/lang is inconsistent with the widget templating. Placeholders in a templated widget are written like ${placeholder, but in dojo/_base/lang a placeholder is defined as {placeholder} (without the dollar sign).

template inside html mustache js

I'm using mustache to render portion of html. To do this , I'm using this javascript :
var template = $("#div_name").html();
..
..
$("#container").append(Mustace.render(template,some_object));
As the <div id="div_name"></div> still remain inside the html , I use it only to get a template i was wondering : is it convenient to keep templated div html be inside the html or is better to load it e.g. with partials through ajax ?
Thanks in advance.

You can also keep templates inside script elements like so:
<script type="application/mustache" id="div_name">
//Mustache template code here
</script>
And fetch the template code from there using $("#div_name").html(). It won't be shown on the page and the script tag is not executed because of the invalid type.