I know this is a solved problem and the question might sound stupid but I come from a mostly backend, mobile and low-level development background.
I am working on a JS application (pure JS, no framework but structured really nicely). The only issue with the application is that all HTML is written in Javascript. So it would look like:
$div = ('<div>Hello</div>');
And then you can imagine how ugly this can get with all the additions and HTML manipulations. Now this HTML eventually ends up getting included into an index.html file that has a standard layout that all other JS files will end up exporting their HTML into somehow (uses some PHP). I want to be able to create a separate HTML file, and have a JS file use that file. How can I do so? I know typically the problem is the other way round: in the HTML, get the JS/template it. But in this app's case, this is not the issue.
With the current app I have, is there a way to use Handlebars or Underscore, or anything similar, to be able to write the HTML in an HTML file and just include it into the Javascript? I understand that this may require some pre-compilation but this isn't a problem.
The examples on Underscore and Handlebars only show simple HTML examples written the way I have it above. Examples online are showing how to template HTML with Javascript, but not precisely what I want.
Anyone has any suggestions or can help please?
I think you can easily do this using JQuery's $.ajax() method. Here's an exmaple:
$.ajax({
type: "GET",
url: "/templates/something.html",
dataType: "xml",
success: function (xml) {
$div = xml;
console.log('Loaded HTML: ', xml);
}
});
Handlebars will work for what you're trying to do, and it's super simple to use!
Let's take a simple example (taken from the handlebars website). Assume this is your HTML:
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
All you have to do is put it in a file (let's call it html.handlebars) then reference that file in a script tag:
<script id="html-template" type="text/x-handlebars-template" src="./html.handlebars"/>
Then from your Javascript you can create a template:
var source = $("#html-template").html();
var template = Handlebars.compile(source);
then generate the HTML from the template:
var context = {title: "My New Post", body: "This is my first post!"}
var html = template(context);
at this point html will be:
<div class="entry">
<h1>My New Post</h1>
<div class="body">
This is my first post!
</div>
</div>
which you can use just like any other string of html (ex: $(html).appendTo('body')).
You can make as many handlebars templates as you want, ranging in size from full pages to small snippets as above.
If performance becomes an issue you can look into precompiling as well: http://handlebarsjs.com/precompilation.html
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.
How does one localize a pure front-end application that uses a framework such as Kendo UI ?
I mean, it's possible to do something like this:
$(document).ready(function(){
$("#myText").html(<grab text based on language>);
});
But then, if I have a listview and want to localize its title:
<div id="tabstrip-expenseaccounts" data-role="view">
<ul data-role="listview" data-style="inset" data-type="group">
<li id="expenseaccounts-listview-title">
abcde
<ul>
...
</ul>
</li>
</ul>
</div>
Becomes:
...
<li id="expenseaccounts-listview-title" class="km-group-container">
<div class="km-group-title">
<div class="km-text">abcde</div>
</div>
<ul class="km-list">
...
</ul>
</li>
...
I need to inspect the generated code and do something like:
$(document).ready(function(){
$("#expenseaccounts-listview-title.km-group-container div.km-group-title div.km-text").html(<grab text based on language>);
});
It works fine, but that doesn't seem like a clean solution to me.
Any advice ? Thanks!
For KendoUI there some language packs available on GitHub here. This other stakoverflow question should give you a headstart. With this, all you have to do is use the correct language pack and you're good to go. And if there is no language pack for your specific case, you can always roll your own.
Hope this helps.
While I have not found a solution proper to Kendo UI, here is the approach I went for to localize my mobile application. Note here that I am not talking about localizing widgets, I am referring to localizing every static aspect of the application: input placeholders, texts on buttons, headings, etc.
My mobile application only has one file, index.html, and whenever I want to navigate to a different page, i simply move to a different view. Since having multiple views in the same file is kind of a mess, I made one html file per view, and am dynamically loading them into the body (index.html has an empty body). Before appending the html which is retrieved using $.get for each view (at this point, it's a huge string), i am replacing text based on the current language (which is retrieved from the localstorage/cookie or from a default value).
example:
In my localization library:
_localization.localizeText = function(text, arr){
arr.forEach(function(item){
text = text.replace(item.name, getLang() == 1 ? item.replacement.en : item.replacement.fr);
});
return text;
}
In my login.html file:
<button>$$login-button$$</button>
And then in some javascript file which is included before the script in which the application is initialized:
var replacements = [];
replacements.push({
name: "$$login-button$$",
replacement: {
fr: "Connecter",
en: "Log In"
}
});
And then when i'm loading my files into the body:
$.when($.get("login.html"))
.done(function(p1){
var body = $("body");
body.append(localization.localizeText(p1[0], app.replacements));
});
Hope this helps anyone with similar issues!
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.
I am new to MVC-style javascript libraries, so pardon me if this question is too basic. I'm trying to write a Single-Page Application entirely in jQuery and agility.js. The examples given in the agility.js documentation consist entirely of adding html elements to the document root. Question: Is there a 'Best-Practices' way to assemble a page by components.
Here is a rough outline of my html app:
<html>
<head> ... </head>
<body>
<header> ... </header>
<div id=PageHolder>
<div id=AppPane_1></div>
<div id=AppPand_2></div>
</div>
<footer> ... </footer>
</body>
</html>
Within the 'AppPane' divs will be the content of the application.
Okay, given all of this, I'm not asking what can I do, but I'm asking what should I do.
I see from the documentation and my research that I have 3 choices:
create my page composition from atomic agility objects and assemble them in a jQuery document ready block. $$.document.append(Foo) works for the root element, but I could not figure out how to add Foo's children to foo.
Use one (very large) agility object which lays out the basic static html from above and append controls and whatnot to that using the controller functions (which I havn't been able to get to work either)
Use one root agility object and append all the children onto it using view (somehow, I havn't been able to get that to work either.)
Which of these is best, and what is the syntax involved? Thanks in advance, any guidance in assembling html components into a cogent agility app would be much appreciated.
http://jsbin.com/ojenon/1/
In my opinion, the best way to organize your page modules is to save individual client-side templates in script tags in the head:
<html>
<head>
<script type="text/template" id="template1">
<b>Some <abbr>HTML</abbr> template</b>
</script>
<script type="text/template" id="template2">
<b>Some <abbr>HTML</abbr> template</b>
</script>
</head>
...
You could even choose to use a template language, such as jQuery.template or handlebars.js, to facilitate logic, variable interpolation, etc.
Then, in your your controller, you would load the html contents of these templates' script tags from the DOM and copy them into your destination div (#PageHolder) as appropriate.
An alternative to this technique would be storing your templates in a literal JS object in the head:
<script type="text/javascript">
var Templates = {
template1: "<b>Some <abbr>HTML</abbr> template</b>"
...
}
</script>
This is just the beginning. There are many more options, such as pre-compiling your templates, subdividing your templates to avoid redundant template compilations, etc. From a structural standpoint, maintaining your templates in a dedication location will help you scale your single page app.
It's horses for courses I guess, but my preference is to have the template code alongside the Agility code so that it's all visible together. I don't particularly like seeing the html and styling inside the view object, but you can set these up in other variables and reference them in the view like this:
var frmMainTemplate = '<div>' +
'<input type="text" data-bind="name" />' +
'<p>You typed <span data-bind="name" /></p>' +
'</div>';
var frmMainStyle = '& span {background-color:#888; color:#fff;}';
var frmMain = $$({
model: {name:''},
view: {
format: frmMainTemplate,
style: frmMainStyle
},
controller: {}
});
$$.document.append(frmMain);
I am a super beginner to EE and was literally thrust into managing my company's website that is built in EE without training. I'm not a programmer, I'm a designer, so it's been taking me awhile to plug through this. So I might need some dumbed down language :)
I want to create a page that has some Javascript on it. Do I need to create a new template JUST so I can put some javascript on it? And how do I communicate to EE that I want the page I created to go with that template?
I duplicated the page/index template and renamed it to clinician-map (the same name of the page I created in the publisher). EE didn't like that and the page subsequently broke. All I want to do is insert one javascript item, this seems way too inefficient for just one page. Help??
(using EE 1.6.8)
Here is my code from clinician-map template.
{assign_variable:my_weblog="page"}
{assign_variable:my_template_group="page"}
{embed="embeds/html_head" url_title="{segment_2}"}
{embed="embeds/html_styles"}
{embed="embeds/html_scripts"}
<?php include_once("analyticstracking.php") ?>
</head>
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks" limit="1" sort="asc" }
<body class="{url_title}">
{/exp:weblog:entries}
<div id="wrapper">
{embed="embeds/html_headerPlusLeftNav"}
<div id="content">
<div id="contentMain">
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks" limit="1" sort="asc"}
<h2>{title}</h2>
{page_body}
{/exp:weblog:entries}
<!--contactforminfo -->
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks"}
{related_entries id="playa_contentcalloutitems"}
<div class="callout">
<h3>{title}</h3>
{callout_summary}
</div>
{/related_entries}
{/exp:weblog:entries}
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks"}
{related_entries id="playa_contentfeatureditems"}
<div class="featuredContent">
<h3>{title}</h3>
{exp:word_limit total="50"}
{contentfeatured_summary}
{/exp:word_limit}{if contentfeatured_body!=""}<p><a href='{url_title_path='content-featured/'}' class='more'>Read More</a></p>{/if}
</div>
{/related_entries}
{/exp:weblog:entries}
</div>
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks"}
<div id="contentSub">{related_entries id="playa_contentsubitems"}<div class="item {contentsub_bgcolor}">
{if contentsub_contenttype=="Text or Picture with Text"}
<h3>{title}</h3>
{exp:word_limit total="50"}
{contentsub_summary}
{/exp:word_limit}{if contentsub_body!=""}<p><a href='{url_title_path='content-sub/'}' class='more'>Read More</a></p>{/if}
{if:else}
<h3 class="imgHeader">{title}</h3>
{exp:html_strip convert="y" convert_back="none" keep="a,img"}
{contentsub_summary}
{/exp:html_strip}
{/if}
</div>{/related_entries}
{/exp:weblog:entries}
{embed="embeds/html_mailingListSignup"}
</div>
</div>
{embed="embeds/html_footer"}
</div>
</body>
</html>
At glance I can see a couple things that might be confounding you...
You started with a template called 'index' in the 'page' template group.
Looks like the 'page' template you are starting from is meant to display a single entry from the 'page' weblog.
So a request url might look something like this:
http://example.com/page/some_url_title
where 'some_url_title' is the 'url_title' value one of the entries in your 'page' weblog.
Now you have gone and duplicated the index template and called this new template 'clinician-map'.
So you would call an entry through this template at:
http://example.com/page/clinician-map/some_url_title
Now, notice that the first url had 2 segments, while the second had 3 segments?
That's not normally a big deal but the fellow who designed the index template did something that makes it problematic. He is taking the value of segment_2 and passing it through an embed.
So in the first example (index) we are passing the dynamic value "some_url_tile" while in the second example (clinician-map) we are passing "clinician-map". If the embedded template 'html_head' is expecting to get a valid url_title but instead gets the string 'clinician-map' you are likely going to get unexpected results.
Also I don't think we know enough about what you are trying to do to decide if creating a new template is the right approach here. It may be that what you actually need is a new weblog entry or perhaps just a dynamic value inside your existing template.
If it did turn out that a new template is the best approach you could fix the problem I have described by simply replacing segment_2 with segment_3, but I am by no means certain that that is the way you want to go.
I want to create a page that has some Javascript on it. Do I need to
create a new template JUST so I can put some javascript on it?
More specifics would be needed in order to give a solid recommendation but in almost every case, I recommend keeping JavaScript grouped together either in the <head></head> or ideally right before the closing </body> tag if you can get away with it.
Looking at your template code, it appears all the JavaScript is stored in the embeds/html_scripts page. I would add the JavaScript you need to that template. If you only want the JavaScript to appear for certain pages only, I would make use of a conditional (which I'll outline at the end of my answer).
And how do I communicate to EE that I want the page I created to go
with that template?
ExpressionEngine URLs (by default) are assembled as follows:
http://website.com/group/template/url_title
Therefore if you have a page with a url_title of "contact-us", and you wanted that page to use a template in site/pages, you could tell your page to use that template like so:
http://website.com/site/pages/contact-us
That url is obviously fine and dandy for blog articles and such, but it's not that pretty; so ExpressionEngine also enables you to construct "page" based navigation which creates navigation tree based url structures, such as:
http://website.com/contact-us
There are a few third party modules that make it easy to build page navigation such as:
devot-ee.com/add-ons/structure
Using Structure, you specify the default template for each channel and can override the template for each page as well.
I duplicated the page/index template and renamed it to clinician-map
(the same name of the page I created in the publisher). EE didn't like
that and the page subsequently broke. All I want to do is insert one
javascript item, this seems way too inefficient for just one page.
Help??
(using EE 1.6.8) Here is my code from clinician-map template.
There are a number of things I would do different in regards to the template code you provided; however, as a quick fix here's how I would add the one line of JavaScript,
1) Open the embeds/html_scripts template and add the following logic:
{if segment_2 == "my_page_url_title"}
<!-- javascript here -->
{/if}
Note: Here's how segments are determined:
http://website.com/segment_1/segment_2/segment_3
Okay. I ended up just creating a new webblog and new template group and finally it seems like it's working. My javascript is not, but I can figure that out.
Thank you so much for your patience with helping me!