I am building a client-side web application in javascript. To build the templates I have used HandleBars.js templates, i.e. .hbs files.
I am using Jasmine framework for writing the specs for the JavaScript Code.
But I am stuck on loading the .hbs templates from the source files in the specs.
Using the Jasmine-Jquery (Link) plugin I have included the static html templates.
This is part of a sample template :
<li>
<div class="fixedText">
<div class="middleItem">Name</div>
<div class="midItemValue" style = "margin-right: 0.6rem;">
<input id = "textNewGroupName" type="text" style = "width : 300px;" maxlength="300" name="name" value="{{name}}">
</div>
</div>
</li>
included in the hbs file. Because of the similar dynamic values (here name) in the templates I am unable to use the static fixture method.
I found below example by the link that I given in the question, and that fixture is used for HTML
loadFixtures('myfixture.html');
// Run test
some.methodToTest();
// Expect that the methodToTest has modified the content in the div
expect($('#fixtureId')).to...;
I found the answer for HBS also, and it is as follows:-
Instead of loading myfixture.html, I loaded my HBS file.
Moreover the same can be done by var t = readFixtures('myFixture.hbs').
Another way be to use Handlebars.compile('myFixture.hbs')
Related
I'm using the gulp-html-i18n gulp plugin for handling the translations task in a static website.
In order to display the translated content, I should use the Moustache lib as gulp-html-i18n mentioned in his doc.
I'm facing difficulties in the concatenation operations. For example, if I need to assign a conditional class for a html element, I will use the following flow:
${{! if}}$
${{#index.isEnglish}}$
<body class="en">
${{/index.isEnglish}}$
${{! else}}$
${{^index.isEnglish}}$
<body class="sp">
${{/index.isEnglish}}$
In the code above, I'm checking if the language is English, for example, then the class is assigned based on the isEnglish value.
By this approach, we will face a big problem if I need to add new language also it's long and not comprehensive.
Moreover, let suppose I have an array of objects in the following interface:
"data":[{
"title": "foo",
"description": "bar",
"icon": "iconname"
},...]
What if I need to concat the icon name with the scr attribute path while looping through the array above?
<div class="content">
${{#index.home.services.data}}$
<h3>
${{title}}$
</h3>
<p>
${{description}}$
</p>
<img src="path/${{}}$.png" alt=""> ---> Not working with Moustache
${{/index.home.services.data}}$
</div>
So how can I solve the problems above? and what is the best practices for the Moustache.js concatenations?
Sloved!
Solved by using scripts of type text/template.
We can't do the concatition operator directly inside a html attribute, We should write it inside a script of type text/template. like the following example:
<script type="text/template" id="header">
${{#index.pages}}$
<button>
${{title}}$
</button>
${{/index.pages}}$
</script>
Then render the script content and assign it to specific html element using the following javascript code:
var headerTemplate = $('#header').html();
var headerHtml = Mustache.to_html(headerTemplate);
$('#navBar').html(headerHtml);
Note: The dollar signs are used based on gulp plugin for localization task gulp-html-i18n
in order to link the json file to mustache.
If I'm not using the mentioned plugin I must update my code to become:
var headerTemplate = $('#header').html();
var headerHtml = Mustache.to_html(headerTemplate,'path to data');
$('#navBar').html(headerHtml);
One of the most helpful link here.
I am finding problem in adding the external js file to Ionic 3. Here is what I did, I have created a hamburg.js file in src/js/hamburg.js, and called the script file in index.html at app/index.html. And I have added the html code in testpage.hmtl and css in testpage.scss. Also declared in app.component.ts. Here is my code
app.component.ts
declare var wrapperMenu;
hamburg.js
var wrapperMenu = document.querySelector('.wrapper-menu');
wrapperMenu.addEventListener('click', function(){
wrapperMenu.classList.toggle('open');
})
index.html
<script src="assets/js/hamburg.js"></script>
testpage.html
<div class="wrapper-menu">
<div class="line-menu half start"></div>
<div class="line-menu"></div>
<div class="line-menu half end"></div>
Can somebody guide me please?
There is no need to external js file, this plugin play mostly with CSS.
this snippet
var wrapperMenu = document.querySelector('.wrapper-menu');
wrapperMenu.addEventListener('click', function(){
wrapperMenu.classList.toggle('open');
})
can be putted on app.component.ts file. or if you have separate component for the header will be better to put the code in its ts file specifically on ngOnInit() hook.
Edit the best hook in component life-cycle is to put this code into ngAfterViewInit() hook.
Edit 2: Another good practice is to used the predefined class menu-content-open that is added automatically when the menu is opened and you can change the selector in your CSS code from .open to menu-content-open
check my forked example from your original one here.
Note the code will work perfect when you add it into the ionic app.
I'm reading the book ng-book on angular 2 and there is the following:
let loadingGif: string = ((<any>window).__karma__) ? '' : require('images/loading.gif');
#Component({
selector: 'youtube-search',
template: `
<div class='container'>
<div class="page-header">
<h1>YouTube Search
<img
style="float: right;"
*ngIf="loading"
src='${loadingGif}' />
</h1>
</div>
I'm interested in this part:
src='${loadingGif}'
The short note in the book says the following:
Notice that our img has a src of ${loadingGif} - that loadingGif
variable came from a require statement earlier in the program. Here
we’re taking advantage of webpack’s image loading feature. If you want
to learn more about how this works, take a look at the webpack config
in the sample code for this chapter or checkout
image-webpack-loader⁴².
But there are no details. Can somebody please how does it all work?
This only works with inline templates (template in *.ts file) but not when the template is in an *.html file (like templateUrl: './my.component.html).
src='${loadingGif}'
Is TypeScript string interpolation and not related to Angular. It replaces ${loadingGif} with the content of loadingGif
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;
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.