Workshop on backbonejs and handlebar

আপনাকে ধন্যবাদ আজকে ব্যাকবোন এবং হ্যান্ডেলবার্সের পরিচিতি ক্লাসে অংশ নেয়ার জন্য। আশাকরি আপনাদের ভালো লেগেছে এবং আপনারা এই টুলগুলো আপনাদের ভবিষ্যত প্রজেক্টগুলোতে ব্যবহার করতে পারবেন। আজকের ক্লাসের সমস্ত ফাইল গুলো এই মেইলের সাথে সংযুক্ত করে দেয়া হয়েছে। 
 
কোন প্রশ্ন থাকলে অবশ্যই জানাবেন। 
 
ক্লাসে আমি কয়েকটি রিসোর্সের নাম বলেছিলাম, এখানে সেগুলো উল্লেখ করা হল
আপনার মতামত জানালে খুশি হব।
Courtesy by : Hasin Hayder
———————————————
Class 01:
—————
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Backbone & Handlebars Workshop</title>
</head>
<body>

http://js/lodash.min.js
http://js/handlebars.min.js
http://js/jquery.min.js
http://js/backbone-min.js

var Person = Backbone.Model.extend({
defaults:{
name:”Hello World”,
age:”500″
}
});
var p1 = new Person();
var p2 = new Person();
p1.set(“name”,”Anonymous”);
p1.set(“age”,”100″);

p2.set(“name”,”Earth”);

console.log(p2.get(“name”));

</body>
</html>


Class 2

var Person = Backbone.Model.extend({
defaults:{
firstName:”Hello”,
lastName:”World”,
age:”500″,
},
getName:function(title){
return title + ” ” + this.get(“firstName”) + ” ” + this.get(“lastName”);
}
});
var p1 = new Person();
var p2 = new Person();
p2.set({firstName:”Beautiful”,lastName:”Earth”});
console.log(p2.getName(‘Mr.’));


var Person = Backbone.Model.extend({
defaults:{
firstName:”Hello”,
lastName:”World”,
age:”500″,
},
initialize:function(){
console.log(“Hello”);
},
getName:function(title){
return title + ” ” + this.get(“firstName”) + ” ” + this.get(“lastName”);
}
});

var p1 = new Person();

var PersonView = Backbone.View.extend({
tagName:”h1″,
className:”myclass”,
initialize:function(){
this.render();
},
render:function(){
this.$el.html(“Hello”);
}
});

var pv = new PersonView();
$(“#result”).html(pv.el);


var Person = Backbone.Model.extend({
defaults:{
firstName:”Hello”,
lastName:”World”,
age:”500″,
},
initialize:function(){
console.log(“Hello”);
},
getName:function(){
return this.get(“firstName”) + ” ” + this.get(“lastName”);
}
});

var p1 = new Person();

var PersonView = Backbone.View.extend({
// tagName:”h1″,
// className:”myclass”,
initialize:function(){
this.render();
this.model.on(“change”,this.render,this);
},
render:function(){
this.$el.html(“

“+this.model.getName()+”


+ “
Click Me”);
},
events:{
‘click h1’:function(e){
alert($(e.target).html());
}
}
});

var pv = new PersonView({model:p1});
$(“#result”).html(pv.el);


var Person = Backbone.Model.extend({
defaults:{
firstName:”Hello”,
lastName:”World”,
age:500,
},
getName:function(){
return this.get(“firstName”) + ” ” + this.get(“lastName”);
}
});

var PersonCollection = Backbone.Collection.extend({
personsBelow400:function(){
return this.filter(function(item){
return item.get(“age”)


 

Fetch Data

var Person = Backbone.Model.extend({
urlRoot:”http://test.lumen.com/user&#8221;
});
var PersonsCollection = Backbone.Collection.extend({
model:Person,
url:”http://test.lumen.com/users&#8221;
});

var persons = new PersonsCollection();
//alert(persons.length);
persons.fetch({success:function(){
alert(persons.length);

var p1 = persons.first();
alert(p1.get(“firstName”)+”:”+p1.get(“age”));
}});

var p2 = new Person({id:2});
p2.fetch({
type:”post”,
success:function(){
alert(p2.get(“firstName”)+”:”+p2.get(“age”));
}
});

//p2.save()

$(document).ready(function(){

});


Login

var ssn;
$(document).ready(function () {

var Session = Backbone.Model.extend({
defaults: {
isLoggedIn: false,
loginError:””,
attempt:0
},
checkLogin:function(user,pwd){
attempt = this.get(“attempt”);
this.set(“attempt”,attempt+1);
if(user==’admin’ && pwd==’admin’){
this.set({isLoggedIn:true});
}else{
this.set({isLoggedIn:false, loginError:”username and password didn’t match”});
}
}
});

var LoginView = Backbone.View.extend({
initialize: function () {
this.model.on(‘change’, this.render,this);
this.render();
},

render: function () {
if (this.model.get(“isLoggedIn”) == false) {
var templatesrc = $(“#loginform”).text();
var template = _.template(templatesrc);
var params = {title: “Hello, Login Please”,error:this.model.get(“loginError”)};
this.$el.html(template(params));
} else {
var templatesrc = $(“#logoutform”).text();
var template = _.template(templatesrc);
this.$el.html(template({title: “You’re logged in”}));
}
},

events: {
“click #login”: function () {
this.$el.find(“h2”).remove();
alert(“checking”);
var u = this.$el.find(“.login”).val();
var p = this.$el.find(“.pwd”).val();
this.model.checkLogin(u,p);
},
“click #logout”: function () {
alert(“logout”);
this.model.set({isLoggedIn: false});
}
}
});
ssn = new Session();
var lv = new LoginView({model: ssn});
$(“#result”).html(lv.el);

});


Route

var Router = Backbone.Router.extend({
routes:{
“users”:”showUsers”,
“user/:id”:”getUser”,
}
});

var rt = new Router();
rt.on(“route:showUsers”,function(){
console.log(“All the users”);
});

rt.on(“route:getUser”,function(id){
console.log(“Detail About User “+ id);
});

$(“#route1”).on(‘click’,function(){
rt.navigate(“user/444”,true);
});

$(“a”).on(‘click’,function(e){
e.preventDefault();
var href = $(this).attr(“href”);
rt.navigate(href,true);
});

Backbone.history.start({
pushState:true,
root:”backbonetm/route2.html”
});


Route2

var Router = Backbone.Router.extend({
routes:{
“users”:”showUsers”,
“user/:id”:”getUser”,
}
});

var rt = new Router();
rt.on(“route:showUsers”,function(){
console.log(“All the users”);
});

rt.on(“route:getUser”,function(id){
console.log(“Detail About User “+ id);
});

$(“#route1”).on(‘click’,function(){
rt.navigate(“user/444”,true);
});

Backbone.history.start();


Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s