On our page, we have an application "Index" associated with a root element of id "root". I'm attempting to insert a very simple handlebars template into the page inline (inside of this application).
<div id="root">
...
<script type="text/x-handlebars"> (this is nested about 5 levels into "root")
{{foo}}
<script>
...
</div>
However, when the page loads, I find the result is the metamorph placeholder moves to become the first child of "root" (even though in markup, it's quite nested).
What's going on here? No matter where I place this inline template, it keeps going to this place? How do I keep it where it is in markup?
The location the script templates is unrelated to where it's placed in the page. You could add it in the head of the document and it would be placed there as well, since it's the application template (due to it being unnamed). Structure of your app is defined using the router.
Example of nested routes:
http://emberjs.jsbin.com/OxIDiVU/151/edit
Additionally if you want your application to start at a different element you would set the rootElement on the App.
App.rootElement = '#fooId';
Example of rootElement:
http://emberjs.jsbin.com/bucasumo/1/edit
Related
Assume I already have a static web page index.html with its content.
Now after building a React app, I want to create an href link to /app.html where I would put <div id="root"></div> tag, so only when the user navigates to the app page, the React app will be rendered.
How can I set that?
What I did try is basically as presented above: the react app Pablic directory contains an index.html with static content, and inside an href to app.html with a div tag with id="root".
But I get this error:
Target container is not a DOM element.
Maybe you can use CDN rather than create-react-app. Then you can add at any HTML file you want. Of course, this will lose some benefits from CRA.
https://reactjs.org/docs/cdn-links.html
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.
To simplify matters, lets say there's a single HTML page with it's CSS and JS file. No server.
Now comes a request to toggle features on/off in this simple web UI.
The problem is, for example, a new feature would mean changing the HTML structure to add a new component, so now the HTML is a little different.
Also, the CSS of the page itself needs to change in order to support the new component. also, of course, there is javascript code that needs to be changed to fit with the changes made to the HTML..
Of course, if this component was completely "isolated" and had just it's own CSS, javascript and html template file, it was much much easier, but it does require changes to things around it, to the HTML/CSS/JS of the page it resides in.
How can such a complex process be reduced to a simple "feature toggle"?
Also, to bring the complexity to a new level, this new feature might need changes to some library version used in the project, but that's a whole other level of difficulty when toggling features.. but lets ignore this part on the discussion because I am more interested on the matter mentioned above.
I came up with the following way:
System is basically made out of:
index.html (basic HTML entry point which everything loads into)
HTML template files
SCSS files
Architecture-related javascript files
javascript controllers (kinda like pages. control page events and which components to use in it)
javascript components (imagine tables, grids, tree menus, breadcrumbs...)
home.html template example:
<div class='col'>
<component class='line-chart'></component>
<component class='table'></component>
</div>
<div class='col'>
<component class='bar-chart'></component>
</div>
Steps I did (Simplified):
Create a way to switch features on/off within the UI:
Create aמ architecture (system/app-related) javascript file which its task is to create a dropdown which from a person could choose which features to toggle, and the result is saved in localstorage.
Append the dropdown to the page.
When a user selects a feature, reload the page and after refresh, read the features from localstorage and save them to the architecture state object, under the property "features", to be used later.
Create a feature: "home-v2"
So, I'm working on the Master branch (like a boss) and I want to create some big changes in some page, and add a few components and move other existing ones around. What I did was:
Copy the SCSS file of the page _home.scss and rename to _feature-home-v2--home.scss (it will be automatically imported via the main.scss using globbing)
Copy the template file of the page home.html and rename to feature-home-v2--home.html
Import the javascript components files which will be used to the page controller javascript file.
Write some if statements
This is the "ugly" part, where I must set what to will be done according to each feature. So, for my new example feature home-v2 I will need to do a few things:
go to the home page javascript controller file and go to the line where I load the HTML template, and check if the app State "features" object for
something like this:
var templateName = `home`;
if( app.state.features['v2--home'] )
templateName = `feature-home-v2--` + templateName;
Now that the page is using a different HTML structure, which can look like similar to the default home page but with more components and some are in different order:
feature-home-v2--home.html template example:
<component class='breadcrumbs'></component>
<div class='col'>
<component class='table'></component>
<component class='line-chart'></component>
</div>
<div class='col'>
<component class='pie-chart'></component>
</div>
I can now load the imported controllers to where they reside (before they might have been imported but weren't initialized on the page).
Thoughts on the process:
Hitting ctrl-p in Sublime and starting to type feature- will show only the feature-related files.
Produce larger output from the build process, and doesn't use different GIT branches per-feature.
Features should be merged quickly/discarded so the code won't get messy with many features.
using all the features on a single-branch allows to quickly adding/removing with ease of a custom dropdown with checkbox/radio.
GIT commits must be remembered to be named according to the feature worked on, to maintain GIT order with sensible names.
For more complex changes, other files might be needed to be cloned and renamed, even top-order controllers themselves.
I think the best way to replicate flags is to just create a JSON file with ids that you want hide. Then just have the Javascript FileReader (https://developer.mozilla.org/en-US/docs/Web/API/FileReader) read in, parse the JSON, and hide the mapped ids that are false.
Lets say your toggable feature were the following input boxes:
<input id="input_box"/>
<input id="input_box2"/>
Your text file would contain this:
{
input_box: false,
input_box2: true
}
input_box would be hidden, while input_box2 would be shown. This seems like the only way to enable flags, unless you want to put it in the URL.
Initially when the page load all ui-view loaded and works fine But when i change the state ui-view not getting javascript file that loaded earlier in it's parent page.Although ui view gets the css file but not js file.
In the index.html all three ui-view viewA,viewB,viewC and navbar.html is template of ui-viewA.
Here is the state configuration. When i go to studentDashboard the navbar.html loaded but it's js function that define in vendor/all.js doesn't working.
Here is the navbar html and controller
You can work around it by converting the js file into a method and render the function inside the ui-view html containing the child page. this approach will work but the downside is when working with directive to inject the sidebar content dynamically. it will require you to duplicate a separate css of same type for each roles and likewise the js too.
I'm new to angular development. I have been using a few paid angular admin themes. In all of them, developers have only added ng-view and ng-class attribute to index.html. I just want to know how to add a sidebar navigation and a footer to every page without using any ng-include.
If you do not want to use ng-include, you can put your HTML directly in the index.html. That is called a layout template, which is the view that contains the common elements along your application.
In summary, everything in index.html outside the ng-view element is going to appear in every page (as long as you use any module such as angular-route for routing within the same original HTML document (e.g. index.html)).
I would recommend you to follow the official AngularJS tutorial if you are new to this framework. Also, ng-book by Ari Lerner is a must-read on this topic.