Been playing around some with iCanHaz.js templates which i define in the head of my html pages like this.
<script id="test" type="text/html">
<h1>Test</h1>
</script>
I do want to have all my iCanHaz templates in a single file and i dont know how i should import them.
Thanks in advance!
They provide an example for how to pull templates from a server on their site, almost at the bottom, if you use jQuery as well:
$.getJSON('/myserver/templates.json', function (templates) {
$.each(templates, function (template) {
ich.addTemplate(template.name, template.template);
});
});
Then of course you would have to have some server-side code that provide the templates as JSON, and how you do that depends on what server-side language you are using, as pointed out by Poelinca Dorin in his comment.
Like this? (it worked for jsRender templates):
<!--#include virtual="Scripts/RenderTemplates.js" -->
Related
So I'm working on my online portfolio using prosite.com and I created some simple hover thingy using javascript (http://wojtek.szukszto.com/index.html). The problem is prosite.com won't allow me to use < script > tag... Is there any way to do it? Maybe as an external html? I don't know... I'm not really good in coding, so any help would be appreciated.
You can have them as DOM Events like
<div onclick="alert('cat');">
I <strong>Really</strong> want a cat!
</div>
<body onload="//you can put a whole bunch of stuff here"></body>
(It is equivalent to window.onload = function(){ //stuff })
You can put your javascript code into external file and call in the head section of your html document
<head>
<script src ="/JS/yourjsfile.js"></script>
</head>
hope that your host allows you to call JS in the head section
The way I do it is by stating the type of script. The ProSite already has javascript integrated within itself. I use:
<script type="javascript"> Code-Goes-Here </script>
I just started this HTML5 project where we decided to make it a single page architecture by leveraging jQuery $.load() method. Unfortunately, as soon as the JS started to grow, we quickly started running into issues where the modules loaded into the master dashboard have no knowledge of their parent.
The architecture looks like this:
dashboard.html (master file)
moduleA.html
moduleA.js
moduleB.html
moduleB.js
moduleC.html
moduleC.js
Since we decided to also keep the JS as separate files, we are having to load all JS files through dashboard.html in order to invoke them individually when modulex is loaded.
So when loading moduleA.html into the dashboard we have to call its corresponding JS. To do this we simply wrote the JS using a Module Pattern so we can easily invoke it by doing a function call, like:
<script>
moduleA
</script>
or this if we want to access a specific property of this member.
<script>
moduleA.someMethod();
</script>
Now, I know there are is gotta be a nicer way of doing this, right? I hate having to have script tags in the HTML modules in order to load its corresponding JS file.
Another limitation of this is the fact that we no longer can work on modules individually, since the scripts and CSS invocation happens on the parent (dashboard.html) so certainly when moduleA.html is loaded directly, it is pure HTML with no script or CSS.
I looked through the other questions but I didn't see anyone with the same problem.
I looked at AngularJS, EmberJS, KO.JS and BoilerPlateJS but none of them addresses what we are trying to accomplish. The only one that has a similar single page concept is jQuery Mobile but I don't know if you can switch from jQuery to jQuery Mobile and everything remains working.
Has anyone face this issue yet? Is there a solution or would I have to go with a custom solution.
Thanks!
I could argue about AngularJS with you. It is exactly what you need
dashboard.html is layout with some directives attached, but power lies in AngularJs if you use ng-view directive
here is example:
dashboard.js
var app = angular.module("modularApp",[]);
app.config(['$routeProvider', "$locationProvider", function routes($routeProvider, $locationProvider) {
$routeProvider.when('/dashboard', {
controller:'HomeCtrl',
templateUrl:'templates/home.html'
});
$routeProvider.when('/moduleA', {
controller:'ModuleACtrl',
templateUrl:'templates/moduleA.html'
});
$routeProvider.when('/moduleB', {
controller:'ModuleBCtrl',
templateUrl:'templates/moduleB.html'
});
$routeProvider.otherwise({redirectTo: "/dashboard"});
}]);
templates/dashboard.html
<html ng-app="modularApp">
<head>
<!--.... include angular minified js file and what else you need...-->
<script type="text/javascript" src="dashboard.js"></script>
<script type="text/javascript" src="moduleACtrl.js"></script>
<script type="text/javascript" src="moduleBCtrl.js"></script>
</head>
<body>
<a ng-href="#/moduleA">Open Module A View</a>
<a ng-href="#/moduleB">Open Module B View</a>
<!-- Add widgets header menus .... -->
<ng-view></ng-view>
</body>
</html>
moduleACtrl.js
var app=angular.module("modularApp");
app.controller("ModuleACtrl",function($scope){
$scope.scopeValue="Hellow from view";
});
moduleBCtrl.js
var app=angular.module("modularApp");
app.controller("ModuleBCtrl",function($scope){
$scope.scopeValue="Hellow from another view";
});
templates/moduleA.html
<div>{{scopeValue}} in module A</div>
templates/moduleB.html
<div>{{scopeValue}} in module B</div>
You can do more complex things with angular then just this. All depends on your needs. Do you have any special requirements :)
Also, you could create your own directive, like ng-view and use your own $route service and $routeProvider so you can add css and javascript you want to dynamically load when some rute match url.
so instead of above routing table, you could have
app.config(['$myRouteProvider', "$locationProvider", function routes($routeProvider, $locationProvider) {
$routeProvider.when('/dashboard', {
javascript:'javascript/dashboard.js',
templateUrl:'templates/dashboard.html',
cssfile: 'css/dashboard.css'
});
$routeProvider.when('/moduleA', {
javascript:'javascript/moduleA.js',
templateUrl:'templates/moduleA.html',
cssfile: 'css/moduleA.css'
});
$routeProvider.when('/moduleB', {
javascript:'javascript/moduleB.js',
templateUrl:'templates/moduleB.html',
cssfile: 'css/moduleB.css'
});
$routeProvider.otherwise({redirectTo: "/dashboard"});
}]);
But that is, pardon on my French, stup. There are couple libs I tried in ruby on rails to acheive similar, but backend is rendering content, or just part of content. But I'm not sure which backend you are using and are you interested to switch to rails anyway.
DomController in BoilerplateJS does what you need, without using any custom HTML attributes. Your dashboard.html can just have place holders where you want to inject your components. I'm just pulling out some html below from BoilerplateJS index.html to show how it works:
<body>
<section id="page-content">
<header>
<section class="theme"></section>
<section class="language"></section>
</header>
<aside>
<section class="main-menu"></section>
</aside>
</section>
</body>
theme, language and main-menu sections above are just place holders in to which relavant components would be injected by the DomController. The DomController can be now used to register the components with appropriate selectors as below:
//scoped DomController that will be effective only on $('#page-content')
var controller = new Boiler.DomController($('#page-content'));
//add routes with DOM node selector queries and relavant components
controller.addRoutes({
".main-menu" : new MainMenuRouteHandler(context),
".language" : new LanguageRouteHandler(context),
".theme" : new ThemeRouteHandler(context)
});
controller.start();
Above code is extracted from "/boilerplatejs/src/modules/baseModule/module.js"
I have this template script
<script id="some-template" type="text/x-handlebars-template">
{{#users}}
{username}
{email}
</script>
I want to out-source it to a file called "user_template.js" which will look like this:
{{#users}}
{username}
{email}
and make in the main index.html this link:
<script id="some-template" type="text/x-handlebars-template" src="user_template.js"></script>
The problem is - it doesn't work - how do I do it?
I would use RequireJS for this. Lovely to work with modules and there is also a plugin that is called text that works beautifully with templates.
If it sounds interesting, here's some links:
http://requirejs.org/
http://requirejs.org/docs/download.html#text -- The text plugin
RequireJS is only suitable if you want to use modules though, if not Alon's answer is better.
You can use ajax to load the template file.
With jQuery:
$.get("user_template.js", function(template_text){
var template = Handlebars.compile(template_text);
// more things
});
Is there any way to load some text from another file into javascript, without server side code?
I was thinking to use another element to hold the text inside some comments, but I don't know how to read it's source code with javascript.
Something like:
<script src="myfile.js"></script>
<script> function readMyText() { ... }</script>
In myfile.js:
/* some text */
You can put anything you want into a script tag if you give it a "type" that's not something the browser understands as meaning "JavaScript":
<script id='Turtle' type='text/poem'>
Turtle, turtle, on the ground;
Pink and shiny - turn around.
</script>
You can get the contents via the "innerHTML" property:
var poemScript = document.getElementById('Turtle');
var poem = poemScript.innerHTML;
Here is a jsfiddle to demonstrate.
That trick is popular lately with people doing client-side page building via templates.
Without using ajax or any server code... sorry mate but you can't :(
Building on Pointy's answer, to import from local files do this:
<script src="foo.txt" id="text" type="text">
</script>
You could also use this to target an external file:
<script src="http://foo.txt"></script>
Does anyone know if is there any way to create javascrit templates in Genshi? I mean, I need a .js file where I can use directives like <py:for> and so.
Any idea? Thanks!
You can write it directly in html like this:
<script type="text/javascript">
<py:if test="func1">
/*<![CDATA[*/
function func1() {
}
/*]]>*/
</py:if>
</script>
note: code inside CDATA will be right escaped, so you can use '>','<' as usual.