ICanHaz.js
A clean solution for templating with Mustache.js and jQuery or Zepto
ICanHaz.js | client-side templating with Mustache.js and jQuery or Zepto.js
Using ICanHaz.js is really nice - it's dead simple to create, load and render templates from javascript objects. However, in a somewhat big javascript application, the .html-file that initiates my application and contains all the ICanHaz-templates has become really crowded with template-script tags.
So how should I separate my templates to make things clear again? Are there an alternative to IcanHaz.js that applies better to larger projects?
Source: (StackOverflow)
I've a JSON string:
{
"items": [
{"name": "red" },
{"name": "blue" }
],
"test" : {
"items" :[
{ "name" : "Hello" },
{ "name" : "World" }
]
}
}
How do I print out
<li>Hello</li>
<li>World</li>
I tried with the template below but it doesn't work. It instead prints "Red and blue". I don't have access to change the JSON string, I have to manipulate the template only.
{{#test}}
{{#items}}
<li>{{name}}</li>
{{/items}}
{{/test}}
Source: (StackOverflow)
I am using a javascript templating framework called ICanHazjs.com.
My questions is can I include tags inside of a external javascript file, and if so is there any downsides / compatibility issues with this?
And if I can't what can I attach that will let me add tags.
Source: (StackOverflow)
So far I've had nothing but good things to say about the jQuery plugin. It's been easy to use and has done what I need, and while that should be all I need to formulate an answer I'd like to hear from naysayers and users of other comparable templating engines to see what I might get annoyed with further down the track.
Source: (StackOverflow)
Param:
'<div class="someclass">' + somecontent + '</div>' + somecontent2
Template:
<div>{{ param }}</div>
And in browser I have:
<div class="someclass"> somecontent </div>somecontent2
How to isolate .someclass, that it render as a dom element, not text?
Source: (StackOverflow)
I've this json return
{
"timeline": [{
"id": "2",
"self": {
"uid": "2",
"username": "ptamzz"
},
"file": {
"fid": "43",
"file_name": "First Name"
},
"connection": {
"fid": "4",
"username": "tom"
},
"action": "viewed your document",
"time": "2012-01-16 12:23:03",
"tags": ["Engineering", "Computer Science", "Java", "Java Library"]
}, {
"id": "1",
"self": {
"uid": "2",
"username": "ptamzz"
},
"file": {
"fid": "41",
"file_name": "Write Up"
},
"connection": {
"fid": "4",
"username": "tom"
},
"action": "favorited your document",
"time": "2012-01-16 12:22:04",
"tags": ["Design"]
}]
}
According to the tutorial at http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mustache-js/ (Sample 6: Nested Object section), you can access dot notation to access the nested objects.
From the above json, I want to retrieve the data like self.username, file.file_name etc etc.
Now, I've my template as
{{#timeline}}
<li>
{{self.username}}
</li>
{{/timeline}}
But self.username doesn't work.
How do I retrieve these nested values?
Source: (StackOverflow)
I have the following code saved in a .jspf file:
<!-- include library files -->
<script src="jquery.js"></script>
<script src="icanhaz.js"></script>
<script type="text/html" id="user">
Hello my name is {{ name }}
</script>
<script type="text/javascript">
$(document).ready(function () {
user_data_object = {name: "Michael"};
<!--
This should set user to the string 'Hello my name is Michael'.
However, ich.user is undefined, so when I make this call, I get the error:
TypeError: 'undefined' is not a function
(evaluating 'ich.user(user_data_object)'
-->
var user = ich.user(user_data_object);
});
</script>
Why isn't this working? I tested to make sure jQuery and ich are being correctly included and they are. If I throw this code in a .html file on my computer, it works. However, once I throw it on my server in a .jspf file, it stops working. Any ideas?
Source: (StackOverflow)
Quick question.
I have a template that is rendered in mustache in php.
But it includes sections that are to be rendered in ICH in the client browser.
I cannot work out how to tell mustache in php not to render {{var}} that I want to pass to ICH.
IE I want to see {{variable}} in the html source so that ICH can pick it up.
How do I escape {{ to get it past the php mustache?
Sample:
<script id="user" type="text/html">
\{\{name\}\} {{twitter}} {{{twitter}}}
</script>
but in my html it becomes
<script id="user" type="text/html">
\{\{name\}\}
</script>
Source: (StackOverflow)
I'm trying to get icanhaz/mustache loop working, as defined in this answer and I'm getting following error in browser console:
Uncaught Error: Syntax error, unrecognized expression: <option value="1">First</option>
<option value="2">Second</option>
Don't know why. I've just managed to spot that this is the line that causes the problem:
ich.myTemplate(listOfStuff);
This is my entire code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/transitional.dtd">
<html>
<head>
<title>icanhaz.js demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript" src="https://raw.github.com/HenrikJoreteg/ICanHaz.js/master/ICanHaz.js"></script>
</head>
<body>
<select id="mySelectBox">
</select>
<script id="myTemplate" type="text/html">
{{#stuff}}
<option value="{{key}}">{{desc}}</option>
{{/stuff}}
</script>
<script>
$(document).ready( function() {
var listOfStuff = {stuff: [
{key: "1", desc: "First"},
{key: "2", desc: "Second"}
]};
var x = ich.myTemplate(listOfStuff);
$("#mySelectBox").append(x);
});
</script>
</body>
</html>
Thanks for any suggestions!
Source: (StackOverflow)
I am having problems getting my backbone.js view events to fire. When I click #login-button nothing is happening.
I am also using iCanHaz (http://icanhazjs.com/) to load the templates.
Here is my javascript:
$(function() {
var router = new App.Router;
Backbone.history.start();
});
App.Router = Backbone.Router.extend({
routes: {
"login": "login"
},
login: function() {
var view = new App.Views.LoginView;
}
});
App.Views.LoginView = Backbone.View.extend({
el: '#login',
initialize: function() {
_.bindAll(this, 'render', 'validateLogin');
this.render();
},
render: function() {
App.Stage.html(ich.loginView());
},
events: {
'click button#login-button' : 'validateLogin'
},
validateLogin: function(event) {
console.log("validateLogin fired.");
}
});
Here is my markup (using ICanHaz.js):
<script id="loginView" type="text/html">
<div data-role="page" id="login" class="container">
<div class="hero-unit">
<div class="row-fluid">
<div class="span12">
<div class="form-horizontal">
<fieldset>
<legend>Please login to continue</legend>
<div class="control-group">
<label class="control-label" for="username">Username</label>
<div class="controls">
<input type="text" class="input-xlarge" id="username">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password</label>
<div class="controls">
<input type="password" class="input-xlarge" id="password">
</div>
</div>
<div class="form-actions">
<button id="login-button" class="btn btn-primary btn-large">Login</button>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</script>
Source: (StackOverflow)
given code below:
require.config({
baseUrl: '',
paths: {
'jquery' : 'js/lib/jquery',
'text' : 'js/lib/text',
'underscore' : 'js/lib/underscore',
'icanhaz' : 'js/lib/ICanHaz'
}});
require(['jquery', 'icanhaz', 'underscore', "text!view/module/login/login.html"],
function ($, ich, _,loginHtml)
{
//jquery has value
//icanhaz is undefined
//_ is undefined
//loginHtml has value
Can you please explain to me why jQuery and text have values where other files in the same folder do not and are undefined when code executes?
Source: (StackOverflow)
If i compare a mustache generated variable with the actual string it shows weird result.
<?php
$username = {{userName}};
echo $username; // john
//if i compare with the string it returns false
if ($username == 'john') //return false
//if i print strlen($username) it returns 14 but it should return 4
?>
how to convert it to regular string so i can compare it with other string in php? any help?
Source: (StackOverflow)
I am used to defining my django views with http request that send http response back with a python dictionary of data that i can iterate over and display. I am attempting to replace this with the use of backbone.js.
Currently i have a set up like so:
<ul id="teaching_students">
{% for student in students.object_list %}
<li class="selected">
<span> {{ student.name }} </span>
</li>
{% endfor %}
</ul>
and i would like to use ICanHaz.js and Mustache.js as javascript templates to fill {{ student.name}} on the client side.
Using tastypie so far, i have a PersonResource which has all the students coming back as json objects when the following url is passed.
http://127.0.0.1:8000/api/people/?format=json
- Do i need to generate an API view for this url in views.py, if so what does that look like?
- How do i call, in backbone.js, this url and set up a collection, view and a correct route ?
My client side structure is broken down into views/models (i use require.js to bring them together).
I am using several plugins to help bridge the gap between backbone and tastypie (backbone-tastypie.js) but i really want to see how others have replaced traditional django template rendering with REST api's and backbone.js
EDIT: Adding Backbone model, here is the model i am using
define([
'underscore',
'backbone'
], function(_, Backbone) {
var PersonModel = Backbone.Model.extend({
defaults : {
},
initialize: function( options ) {
},
parse : function(res) {
// because of jsonp
return res.data;
}
});
return PersonModel;
});
Source: (StackOverflow)
I'm trying to replace an existing web application with a brand spanking new interface written in Backbone.js. Eventually, this will be awesome, because the application is backed by a restful API written with Python + CherryPy and hates to have its host page refreshed.
My first step was to attempt to throw together a little Backbone.js proof of concept using the various tutorials that are floating about the 'net. Here's what I came up with:
<!DOCTYPE html>
<html>
<head>
<script type="application/javascript" src="/static/js/jquery-1.8.2.min.js"></script>
<script type="application/javascript" src="/static/js/underscore-min.js"></script>
<script type="application/javascript" src="/static/js/json.js"></script>
<script type="application/javascript" src="/static/js/ICanHaz.min.js"></script>
<script type="application/javascript" src="/static/js/backbone.js-0.9.9-min.js"></script>
<script type="application/javascript">
$(function() {
//logical model of a user
var User = Backbone.Model.extend({});
//visual representation of a user
var CurrentUserView = Backbone.View.extend({
render: function() {
this.el = ich.user(this.model.toJSON());
return this;
}
})
//create a user and drop its representation into the DOM
var currentUser = new User({username: "hello world"});
var view = new CurrentUserView({model: currentUser});
$('.content').append(view.el.render());
});
</script>
</head>
<body>
<div class='content'>
<p>The user representation should show up below this paragraph</p>
</div>
<!--ICanHaz user template -->
<script id="user" type="text/html">
<ul class="user">
<li><a rel='nofollow' href="#">{{ username }}</a></li>
<li><a rel='nofollow' href="#" id="logout">logout</a></li>
</ul>
</script>
</body>
</html>
Unfortunately, when I load this page in Firefox, the user representation does not show up inside of the .content div, and the error message SyntaxError: JSON.parse: unexpected character shows up in the web console.
The issue seems to be related to the CurrentUserView because the following code does exactly what I want:
$(function() {
//logical model of a user
var User = Backbone.Model.extend({});
//create a user and drop its representation into the DOM
var currentUser = new User({username: "hello world"});
$('.content').append(ich.user(currentUser.toJSON()));
});
What is going on here?
Source: (StackOverflow)