ADDY OSMANI
https://github.com/addyosmani/backbone-fundamentals
پیشگو
تازه شد برنامه وب بروزر سنگین با داتا نوشته می شوند. امروز خیلی از این برنامه ها ساخته شده اند.
می گرفتند. server اکسرا، برنامه ها سنگینیشانهایشون را از
user experience استفاده می شد برای JavaScript
اما امروز خد برنامه رو صفه با
نوشته می شود. JavaScript
نشان داد که صفه خدش مدل و ویو دارد، و از آن شد که رسیدیم به اینجا. jQuery
حالا که اینقدر راه پیدا می شوند واسه برنامه نوشتن که بسیار محم است توجع کرد چطر بر نامه نوشته می شود.
که نوشتن برنامه ساده تر شده است. JavaScript خشبختانه زیادی کنسول وجود دارد برای
اول تمرین کنید. سعی کنید تمیز بنویسید. اگر وارد هسترید یا نه، این کتاب می تواند کمکتون کند.
.Creative Commons license یاد گرفتن برای من محم است و بخواتر این دوست داشتم کتاب را واسه عزیزان بنویسم با
شما میتوانید کتاب را استفاده کنید، و حتی بهتر بنوسیدش.
.Backbone.js ممنون از نویسنده های کنسل
،Backbone.js و از عده
کتاب به درد کی می خور؟
این کتاب برای شاگردان کم دان تا دانشمند میتواند استفاده شود.
تشکرات
ممنونم به:
کارگردان
• Derick and Marc (once again)
• Will Sulzer
ورژن
می خرد Backbone.js 1.0.0 & Underscore 1.5.1 این کتاب به درد
تمرین ازافه
اوایل
این کتاب برای نوشتن برنامه کمپیوتر است، که برنامه خوب کار کند و نگهداریش و فقلاده تر کردنش بهتر انجام شود.
برنامه ای می خواهیم که ساده نوشته و خوانده شود. حتی دوست داریم خوشگل باشد.
Javascript کنسول های جدیدی
می تواند کارهایتان را از اول بهتر کند.
تنها برنامتون می تواند پیچیده و سخت باشد. jQuery با
ساده کنید.Backbone.js ما با این کتاب نشان می دهیم چطور برنامه را با
چی است Backbone.js?
کنسول صبک است که کنترل اضافه می دهد به صفه که بر نامه در صفه تسمیم بتواند بگیرد.
با این میتوانید بر نامه یک صفه ای بنویسید بدون کنترل قیر از صفه.
کمک میکند ساده بتوانید مدل تان را به کار بگذارید، و خیلی سرویسهای بزرگ استفادش می کنند.
کوچک هم است. می توانید اصل شان را با سادگی بخوانید.
چی است MVC?
بعضی از کنسول ها کمک می کنند کار های برنامه را جدا کنند به سه قسمت:
۱) مدل - داتا و اصل وجود بر نامه که خواهد نشان دهد به صفه
۲) کنترل - کارگردان که داتا را استفاده می کند و به صفه می فرستد
۳) ویو - هر چی که رو صفه نشان می شود
پس با ام - وی - سی میتوانیم کار های برنامه را جدا کنیم.
تاریخ ام- وی- سی
مهم است بدانیم که اوایلها صفه وجود کم یا کوچک داشت. ویو-کنترل جفت جمع بودند، و خواست نویسندگان زبان ها می خواستنند مغز برنامه جدا باشد از نشان برنامه.
ما را در این حال کمک می کند. JavaScript با برنامه های یک صفه ای، می توانیم ام- وی- سی واقعیی استفاده کنیم. زبان
ام- وی- سی در وب
بگذاریم اولین برنامه ما را نگاه کنیم.
در قسمتی احتیاج داریم کلمات را ازافه کنیم:
<!DOCTYPE html> این اوایل دکومنت است //
<html lang="en"> به زبان انگلیسی //
<head> قسمت بالا دکومنت //
<meta charset="utf-8"> نوع نوشته //
<title></title> قسمت نام بالا //
<meta name="description" content=""> اسم قسمت برای سرچ انجین //
</head> قسمت بالا را ببندین //
<body> قسمت اصل //
<div id="todo"> اسم قسمت در قسمت اصل //
</div> بستن آن قسمت //
<script type="text/template" id="item-template"> // script شروع
<div>
<input id="todo_complete" type="checkbox" <%= completed ? 'checked="checked"' : '' %> />
<%= title %>
</div>
</script> تمام قسمت //
<script src="jquery.js"></script> جی کو عری کونسل //
<script src="underscore.js"></script> آندر سکر کونسل //
<script src="backbone.js"></script> بک بون کونسل //
<script src="demo.js"></script> دمو کنسول //
</body> تمام قسمت اصلی //
</html> تمام دکومنت //
در برنامه با اسم مدل می سازیم برای هر کار برای لیست انجامی:
// اینجا مدلتان را بسازید
var Todo = Backbone.Model.extend({ مدل ساختن //
// به مدلتان شکل بدهید
defaults: { این شکلهای ساده //
title: '', اسم //
completed: false ‘تمام: نه’ //
}
});
// به مدلتان اسم دهید
//
var myTodo = new Todo({ یک اوبژه ساخته شود از آن بالا //
title: 'Check attributes property of the logged models in the console.' اسم را بدهید به اوبژه //
});
مدل تان دو تا داتا دارد: اسم و ‘آیا تمام شد؟ آره یا نه؟’.
می توانید هر چه در مدل تان بسازید.
هر اوبژه با صفه خودش خواهد نشان دهد:
اینجا صفه را بسازید://
var TodoView = Backbone.View.extend({ صفه ساختن //
tagName: 'li', چه قسمت در صفه اوز شود //
// بفرمایید چه انجام شود
todoTpl: _.template( $('#item-template').html() ),
events: {
'dblclick label': 'edit', آیا موش دو مرتبه کلیک شد //
'keypress .edit': 'updateOnEnter', آیا کی بورد خرده شد //
'blur .edit': 'close' آیا صفه بلور شد //
},
// همیشه اوایل صدا می شود
initialize: function() { در اوایل این کار را انجام دهید //
this.$el = $('#todo'); قسمت اصل اعلام شد به قسمت صفه به نام تودو //
},
// قسمت که چی نشان شود
render: function() {
this.$el.html( this.todoTpl( this.model.toJSON() ) ); انجام را ربت کنید به صفه //
this.input = this.$('.edit'); آن أه بیاد تو برنامه بگذارید به صفه //
return this; صفه را بر گر دانید //
},
edit: function() {
آیا موش دو مرتبه کلیک شد //
},
close: function() {
/آیا کی بورد خرده شد /
},
updateOnEnter: function( e ) {
آیا قسمت بلور به کار انداخته شد //
}
});
// یک اوبژه صفه بسازید
var todoView = new TodoView({model: myTodo});
Backbone.js استفاده
برنامه یک صفه ای می تواند از خد نشان دهد یا از سرور. وقتی نشان می شود، از خد می تواند راه های ه-ت-ت-پ را بفرماید.
اکس زیر نشان می دهد شکل برنامه یک صفه ای.
مدل
- توانایی مدل فرق می کند بیعن کنسول ها
- مدل احتیاج دارد در برنامه جا مموری داشته باشد یا از تو خود برنامه یا از داتابیس قیر از برنامه
-یک مدل می تواند چندین صفه داشته باشد
- مدل ها می توانند جمع بشوند تو گروه با اسم ‘کلکشون’، و با این راه می شود تمام مدل های یک گروه را یک دافعه ای اوز کرد.
ویو یا صفه
- برنامه در صفه استفاده می شود. کسان که برنامه را استفاده می کنند، از صفه با آن برنامه ئستفاده می کنند.
render() - صفه با رندر نشان می شود
احتیاج داریم Underscore.js - برنامه مدل را با تمپلات نشان می دهد و برای این ما
Templating
تمپلات
- خوب نیست تمام ه-ت-م-ل در یک ردیف بنویسیم. برنامه زیادی بزرگ می شود بدون دلیل.
- کنسول های تمپلات وجود هستند ما را کمک کنند که ه-ت-م-ل ازافه کنیم به برنامه.
Mustache.js & Handlbars.js - کنسول ها که می توانیم استفاده کنیم زیادند، اما دو تا معروفشان هستند
- شکل تمپلات هست:
<%= title %> Underscore
{{title} Handlebars
Underscore.js یک تمپلات دیگه هست
Handlebars.js:
<div class="view">
<input class="toggle" type="checkbox" {{#if completed}} "checked" {{/if}}>
<label>{{title}}</label>
<button class="destroy"></button>
</div>
<input class="edit" value="{{title}}">
Underscore.js Microtemplates:
<div class="view">
<input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
<label><%= title %></label>
<button class="destroy"></button>
</div>
<input class="edit" value="<%= title %>">
تمپلات استفاده کنید. curly bracket { { } } شما می توانید با
_.templateSettings = { interpolate : /\{\{(.+?)\}\}/g };
صفه راهنمایی
با برنامه یک صفه میتوانید بدون سرور صفه را نشان دهید. برای این کار، روتر استفاده می شود که صفه اوز شود.
کنترلر
در برنامه تمرینمان کنترلر استفاده می کنیم. اما کنترلر اصلی نیستش. فقت کمک می کند صفه ها را راهنمایی کنیم که بتوانیم از یک صفه برویم صفه دیگه.
ام- وی- سی چی به ما می دهد؟
ام- وی- سی کمک می کند برنامه ما قسمت شود ربت به کار هایی که باید انجام شود: مدل - صفه - و راهنمایی
Backbone.js یاد گرفتن
استفاده کنید برای نوشتن برنامه یک صفه ای با مدل - صفه - و راهنما یا کنترلر. Backbone.js در این قسمت، شما خواهید یاد گرفت چطور می توانید
شروع به کار
قبل از این که شروع کنیم، برنامه شما آماده کنید برای استفاده کنسول. می توانید ه-ت-م-ل زیر را استفاده کنید برای شروع به کار:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script>
اینجا خواهید برنامه بنویسید //
</script>
</body>
</html>
در بروزرتان روشن کنید. “Developer Tools” می توانید این فعیل را در بروزر استفاده کنید. یادتان باشد
بتوانید بنویسید و تمرین کنید. JavaScript بعد، در بروزر بفرمایید قسمت کنسول که
مدل
تمرین می کنیم Todo list مدل داتا است برای برنامه های شما. ما با برنامه
var Todo = Backbone.Model.extend({}); یک مدل اصلی درست می کنیم //
var todo1 = new Todo(); یک اوبژه با آن مدل درست می کنیم که هیچ داتا هنوز ندارد //
اوبژه ما را به کنسول بروزر می نویسیم //
console.log(JSON.stringify(todo1));
اینجا داتا ازافه می کنیم به اوبژه مدلمان //
var todo2 = new Todo({
title: 'Check the attributes of both model instances in the console.',
completed: true
});
حالا دوباره اوبژه را به کنسول بروزر می نویسیم //
console.log(JSON.stringify(todo2));
ساختن اوبژه با داتا
استفاده می شود اوبژه بسازیم با داتا initialize()
var Todo = Backbone.Model.extend({
initialize: function(){
console.log('This model has been initialized.'); اینجا داتا ازافه می کنیم به مدل که ساختیم //
}
});
var myTodo = new Todo();
اینجا یک اوبژه از آن مدل می سازیم //
داتا در مدل و اوبژه های آن مدل
گاهی مقعه ها می خواهید داتا یا هال بفرمایید به اوبژه هایتان
var Todo = Backbone.Model.extend({
// Default هالت به مدلتان بفرمایید
defaults: {
title: '',
completed: false
}
});
این اوبژه حالت بدون اسم دارد //
و اوبژه از مدل است //
var todo1 = new Todo();
// در کنسول بروزر نشان می دهد {"title":"","completed":false}
console.log(JSON.stringify(todo1));
یا به خد اوبژه می توانیم داتا بفرماییم //
var todo2 = new Todo({
title: 'Check attributes of the logged models in the console.' اینجا اسم به اوبژه فرماییدیم //
});
// کنسول بروزر نشان می دهد این اوبژه اسم دارد {"title":"Check attributes of the logged models in the console.","completed":false}
console.log(JSON.stringify(todo2));
یا می توانید حال اوبژه قیر کنید از آن که وجود است در مدل //
var todo3 = new Todo({
title: 'This todo is done, so take no action on this one.',
completed: true
});
// کنسول بروزر نشان می دهد {“title":"This todo is done, so take no action on this one.","completed":true}
console.log(JSON.stringify(todo3));
نوشتن و گرفتن داتای اوبژه
Model.get()
گرفتن
راه است برای گرفتن داتای اوبژه Model.get()
var Todo = Backbone.Model.extend({
حال داتا مدل //
defaults: {
title: '',
completed: false
}
});
var todo1 = new Todo();
console.log(todo1.get('title')); // خالی
console.log(todo1.get('completed')); // یا نه false
اینجا حال را اواج می کنیم //
var todo2 = new Todo({
title: "Retrieved with model's get() method.",
completed: true
});
console.log(todo2.get('title')); // خالی نیست
console.log(todo2.get('completed')); // یا بله true
استفاده کنید toJSON() اگه می خواهید بخوانید یا بگیرید داتای مدل
var Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
}
});
var todo1 = new Todo();
var todo1Attributes = todo1.toJSON();
// کنسول بروزر نشان می دهد: {"title":"","completed":false}
console.log(todo1Attributes);
var todo2 = new Todo({
title: "Try these examples and check results in console.",
completed: true
});
// کنسول نشان می دهد: {"title":"Try these examples and check results in console.","completed":true}
console.log(todo2.toJSON());
Model.set()
نوشتن
داتا می نویسد به اوبژه ای که از مدلتان ساختید Model.set()
var Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
}
});
اسم را می توانید اینطور بنویسید //
var myTodo = new Todo({
title: "Set through instantiation."
});
console.log('Todo title: ' + myTodo.get('title')); // کنسول بروزر نشان می دهد
console.log('Completed: ' + myTodo.get('completed')); // کنسول نشان می دهد
دوباره به اوبژه مان می نویسیم //
myTodo.set("title", "Title attribute set through Model.set().");
console.log('Todo title: ' + myTodo.get('title')); // کنسول بروزر نشان می دهد
console.log('Completed: ' + myTodo.get('completed')); // کنسول بروزر نشان می دهد
دوباره داتا می نویسیم به اوبژه مدلمان //
myTodo.set({
title: "Both attributes set through Model.set().",
completed: true
});
console.log('Todo title: ' + myTodo.get('title')); // کنسول بروزر نشان می دهد اسم نوشته شده است
console.log('Completed: ' + myTodo.get('completed')); // کنسول بروزر نشان می دهد قسمت بعدی هم نوشته شده است
مستقیم گرفتن و نوشتن بع اوبژه یا مدل
دارد که می توانید گرفتن یا نوشتن داتا را به آن اوبژه استفاده کنید .attributes مدل قسمت
را بنویسیم در اوبژه بعد از یک اعتفاق، تمام مدل می تواند اواج شود {silent:true} اگه
var Person = new Backbone.Model(); مدل می سازیم //
Person.on("change:name", function() { console.log('Name changed'); }); با اعتفاق فرق به اسم راهنمایی می فریادیم //
Person.set({name: ‘Asghar Ali’}); دستور می دهیم اسم اواز بشود بعد از آن اعتفاق //
Person.set({name: ‘Vooroojak’}, {silent: true});
دوباره دستور می دهیم داتای مدل اوز شود //
استفاده شود که تکی اوبژه اوز شود بجای تمام اوبژه های یک مدل Model.set() بهتر است
گوش کردن به اعتفاق
initialize() اگه می خواهید برنامه با اعتفاق اوز شود، باید دستور داد کع برنامه گوش کند در قسمت
var Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
},
initialize: function(){
console.log('This model has been initialized.');
this.on('change', function(){ اینجا گوش می کنیم بر نامه هر مقعه اوز شد //
console.log('- Values for this model have changed.'); وقتی برنامه اوز شد، می نویسیم بع کنسول بروزر //
});
}
});
var myTodo = new Todo(); یک اوبژه از مدل می سازیم //
myTodo.set('title', 'The listener is triggered whenever an attribute value changes.'); اسم به آن مدل می دهیم //
console.log('Title has changed: ' + myTodo.get('title')); می نویسیم به کنسول //
myTodo.set('completed', true); قسمت دیگه اوبژه را می نویسیم //
console.log('Completed has changed: ' + myTodo.get('completed')); نشان می دهیم که نوشتیم در کنسول بروزر //
myTodo.set({ باز دوباره داتا را می نویسیم به اوبژه //
title: 'Changing more than one attribute at the same time only triggers the listener once.',
completed: true
});
حتی می توانید به اتفاقات مخصوص گوش کنید. ئینجا، ما بع اتفاق فرغ به اسم می شنویم:
var Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
},
initialize: function(){
console.log('This model has been initialized.');
this.on('change:title', function(){ اینجا دستور میدیم که فرغ به اسم مدل گوش سود //
console.log('Title value for this model has changed.'); دستور می دهیم به کنسول بروزر نوشته شود //
});
},
setTitle: function(newTitle){
this.set({ title: newTitle });
}
});
var myTodo = new Todo();
هر دو تا از این اتفاقات به کنسول می نویسد، بخاتر این که اسم اوز می شود //
myTodo.set('title', 'Check what\'s logged.');
myTodo.setTitle('Go fishing on Sunday.');
اما این فرغ را گوش نمی دهیم، بخاتر این که به اسم ربت ندارد //
myTodo.set('completed', true);
console.log('Todo set as completed: ' + myTodo.get('completed'));
به کنسول بروزرتان خواهد نوشت : //
// This model has been initialized.
// Title value for this model has changed.
// Title value for this model has changed.
// Todo set as completed: true
متمعن شدن یا ولیدیشان
می توانیم متمعن باشیم که داتا پر شده است برای حال های اوبژه مدل که دستور دادیم خالی نباش model. validate() با
{validate: true} خود برنامه متمعن می شود که داتاتون خالی نباشد، یا وقتی که داتا را فرغ می دهید با دستور save() هر مغعه دستور می دهید با
var Person = new Backbone.Model({name: “Roho’lla Akbar Hassan Hossein Aadamkhor Taryakdoost”});
دستور می دهیم که آیا اسم خالی باشد، متمعن بشیم اجرا کنیم که اسم خالی است و این که نباید خالی باشد //
Person.validate = function(attrs) {
if (!attrs.name) {
return 'I need your name';
}
};
اسم را اوز کنید //
Person.set({name: ‘Jennifer Jamshidi’});
console.log(Person.get('name'));
// ‘Jennifer Jamshidi’
اسم را سعی کنید خالی کنید، نمیشه //
Person.unset('name', {validate: true});
// false
توجع کنید استفاده شد که اسم را پاک کنیم unset((
متمعنات می توانستند ساده باشند یا ساده نباشند
اگه خطا:
- اتفاقی که گوش کردید اشتبا است
- کار درست انجام نمیشود، و فرغ به داتابیس نرسید
یک متمعن فقلاده تر:
var Todo = Backbone.Model.extend({
defaults: {
completed: false
},
validate: function(attributes){ قسمت متمعنات را فرمان دهید //
if(attributes.title === undefined){ اگه اسم خالی باشد، خطا دهید //
return "Remember to set a title for your todo.";
}
},
initialize: function(){
console.log('This model has been initialized.');
this.on("invalid", function(model, error){
console.log(error);
});
}
});
var myTodo = new Todo();
myTodo.set('completed', true, {validate: true}); چن که اسم خالی است، خطا می گیرید //
قسمتهای داتای اوبژه مدلتان است attributes توجع:
متمعن را اجرع می کند validate
save() یا set() اوبژه همچین را دارد بعد از گذارش داتا با
An example (by @fivetanley) is available
here.
ممکن است، اما کم به درد می خورد بخاطر نداشتن قسمتهایه داتا در اوبژه مدل شما: initialization متمعن گذارش در
var emptyTodo = new Todo(null, {validate: true});
console.log(emptyTodo.validationError);
ویو یا صفه
اصل ه-ت-م-ل نیستش، و فقط نشانهای مدلمان را می دهد Backbone ویو در ئم - وی - سی
میاوریده می شود به صفه بدان این که تمام صفه اوز بشود. render() و با (e.g., Underscore Microtemplates, Mustache, jQuery-tmpl, etc.) بیشتر مقعه، تمپلات استفاده می شود برای این کار
ویو جدید ساختن
می بینیم ویو چطور ساخته می شود: Backbone.View ویو جدید ساختن بهتر است ساده ماند. با
var TodoView = Backbone.View.extend({
tagName: 'li',
تمپلات را در جا هفظ می کنیم //
todoTpl: _.template( "An example template" ),
events: {
'dblclick label': 'edit', گوش می کنیم به دو کلیک موش //
'keypress .edit': 'updateOnEnter', گوش می کنیم بع کلید زدن کیبرد //
'blur .edit': 'close' وقتی که صفه بلور بشد یا فاکس را از دست بدهد //
},
initialize: function (options) {
باید این را صدا کنید // option اگه خواستید Backbone 1.1.0 در
this.options = options || {};
},
// را دستور دهید render
render: function() {
this.$el.html( this.todoTpl( this.model.toJSON() ) ); داتای مدلتان می فرمایید به صفه //
this.input = this.$('.edit'); حال صفه را می گیرید و بر می گردانید //
return this;
},
edit: function() {
دستور اگه موش دو کلیک شد //
},
close: function() {
دستور اگه فاکس صفه رفت //
},
updateOnEnter: function( e ) {
اگه کلید کیبرد خرده شد //
}
});
var todoView = new TodoView();
یک اوبژه ویو ساخته شود، دقیقا مصل مدل //
چی است؟ el
محمترین قسمت صفه است el
چطور می شود بسازیمش؟
قسمت صفه است، و هر صفه باید یک دانه داشته باشد. el
می تواند استفاده شود که مظدل و داتا شما بفرماید در صفه el
دو راه است می توانیم قسمت صفه را صدا کنیم، یا متوانیم بسازیم قسمت را یا می توانیم به قسمتی که وجود دارد اشاره کنیم
div را بگویید أی است یا مجبور میشود به tagName، اگه می خواهید بسازید
‘li’ تمرین بالایی است tagName
استفاده می شود: ‘ul’ این تمرین
var TodosView = Backbone.View.extend({
tagName: 'ul', // 'div' اگه نفرمایید می شود
className: 'container', می توانید کلاس را یا کلاسهایتان را اینجا بفرمایید //
id: 'todos' اگه دوست داشتید یا احتیاج باشد //
});
var todosView = new TodosView();
این تمرین یک قسمت ازافه می کند به صفه
<ul id="todos" class="container"></ul>
اگه قسمت وجود دارد میتوانید صدایش کنید، مصلا برای قسمت پایین صفه:
el: '#footer'
یا در حال ساختن اوبژه تان، می توانید قسمت صفه شما صدا کنید:
var todosView = new TodosView({el: $('#footer')});
function را دستور دهید با options, el, tagName, id and className توجع: وقتی اوبژه ویو می سازید، می توانید حال های
$el و $( )
$el $() ساده می کند با Backbone یا دیگه احتیاج دارد، و jQuery ویو
نویس می شود this.$() و this.$el می بنیم قسمتهای صفه با
setElement
را استفاده کنید: setElement اگه یک قسمت بر نامه می خواهید برسد جای دیگه رو صفه
دو تا دکمه می سازیم به صفه //
var button1 = $('<button></button>');
var button2 = $('<button></button>');
صفه جدید اعلام می کنیم //
var View = Backbone.View.extend({
events: {
click: function(e) {
console.log(view.el === e.target);
}
}
});
یک اوبژه صفه می سازیم ربت به یکی از دکمه هایی که ساختیم //
var view = new View({el: button1});
به جای اوالین دکمه، می گذاریم دومین دکمه با ست المنت //
view.setElement(button2);
button1.trigger('click');
button2.trigger('click'); // بله
هست قسمت صفه که می بینیم. برای گرفتن قسمت باید بچسپانیم قسمت را به صفه “el”
.append( ) با
فهمیدن render()
می توانید استفاده کنید برای تمپلات:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
</head>
<body>
<div id="todo">
</div>
<script type="text/template" id="item-template">
<div>
<input id="todo_complete" type="checkbox" <%= completed ? 'checked="checked"' : '' %>>
<%= title %>
</div>
</script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script src="jquery-min.js"></script>
<script src="example.js"></script>
</body>
</html>
برای دیدن صفه todoTpl استفاده می شود که تمپلات را بگذارد به صفه، و در این تمرین می گذاریمش به _.template
$el بگذارد به صفه، و چسپاند به قسمت صفه با toJSON() این تمپلات را استفاده می کند که داتا را از
اجازه می دهد استفاده شدن این صفه در جا های دیگه و استفاده کاردن قسمتهای صفه با یاک دفعه ساختن یا صدا کردن این اوبژه. this با render() بر گشتاندن آخر
استفاده شود: this بگذاریم ببینیم چطور قسمتهای صفه می توانند با اوبژه
var ListView = Backbone.View.extend({
تمپلات بسازیم برای “(…)” //
که جا را نگه می دارد برای یک قسمت در آینده //
template: _.template(…),
render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
}
});
حالا، می توانیم یک مدل ویو دیگه بسازیم:
var ItemView = Backbone.View.extend({
events: {},
render: function(){
this.$el.html(this.template(this.model.attributes));
return this;
}
});
که با این می توانیم دوباره قسمت ها را صدا کنیم بدان این که قسمت ها را دوباره بسازیم: return this; توگع دهید به
var ListView = Backbone.View.extend({
render: function(){
// items یک قسمتی در داتا شما با نام
بگیریدش، یک اوبژه داتا در لیست تمام داتا تان //
var items = this.model.get('items');
هر کدام داتا در لیست را بفرستید برای حصاب //
_.each(items, function(item){
ویو را با یک داتا تک بسازید //
var itemView = new ItemView({ model: item });
بچسپانید به صفه //
this.$el.append( itemView.render().el );
بر گردانید بعد از این که ساختید //
}, this);
}
});
اتفاقات
می گذارد به اتفاقات گوش دهیم، و با اتفاقات قسمتهای برنامه را بتوانیم اواز کنیم. Backbone events
هر یک اتفاق، دو قسمت دارد:
یا ‘کاری که بایاد انجام شود’: ‘اسم اتفاق’ 'eventName selector': 'callbackFunction'
و دیگران click, submit, mouseover, dblclick و اسم اتفاق می تواند باشند:
ویو تمرینی //
var TodoView = Backbone.View.extend({
tagName: 'li', نام قسمت صفه که اوز شود //
اسم اتفاق و نام کار که بایاد انجام شود //
events: {
'click .toggle': 'toggleCompleted',
'dblclick label': 'edit',
'keypress .edit': 'updateOnEnter',
'click .destroy': 'clear',
'blur .edit': 'close'
},
نام ویو است، و باش می شود کار های مختلف انجام داد this چیزی که زود معلوم نیست هست که
آن کار بایاد همان اسم را داشته باشد، و در همان جا اعلام و فرمایش شود.
با این میشود همان اوبژهای که اوالین بار ساختید صدا کنید، وا قسمت صفعه اش را استفاده کنید.
بعد از دو کلیک موش فرستاده می شود ’edit' در برنامه تمرینمان، کار
حتی می توانید کار را بچسپانید به اتفاقات داتا مدل تان
_.bind(this.viewEvent, this) با
var TodoView = Backbone.View.extend({
initialize: function() { توجع که اینجا حالت شکل کلاس صفه تان اعلام می کنید //
this.model.bind('change', _.bind(this.render, this)); // render این هم راه که اتفاقات فرغ به داتای شما در مدل تان صفه اصلی را اوز می کند با کار به نام
}
});
یک کار را به یک ویو می تواند بچسپاند و می توانید به آن هم حال بفرستید برای حساب _.bind
کلکشان
( کلکشان ) Backbone.Collection یک گروه مدل یک شکل هست
کلکشان باید ساخته شود، و مصل کلاس است، و می تواند هم حال داشته باشد
در برنامه تمرینمان می توانیم کلکشان درست کنیم با گروه یاک نوع کلاس مدل:
کلاس مدلمان //
var Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
}
});
کلاس کلکشان //
var TodosCollection = Backbone.Collection.extend({
model: Todo
});
یک اوبژه از مدل ساخته می شود //
var myTodo = new Todo({title:'Read the whole book', id: 2});
یک لیست می فرستیم به کلکشان //
var todos = new TodosCollection([myTodo]);
ازافه کردن و بر داشتن مدل
:remove() یا add() بالا نشان دادیم چطور لیست می تواند استفاده شود که یک گروه مدل بسازیم. وقتی که کلکشان درست شد، می توانیم مدل را تکی ازافه کنیم یا بر داریم از کلکشان با
var Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
}
});
var TodosCollection = Backbone.Collection.extend({
model: Todo,
});
var a = new Todo({ title: 'Go to Istanbul.’}),
b = new Todo({ title: 'Go to Ramallah.’}),
c = new Todo({ title: 'Go to Israel.’});
var todos = new TodosCollection([a,b]);
console.log("Collection size: " + todos.length);
// Collection size: 2
todos.add(c);
console.log("Collection size: " + todos.length);
// Collection size: 3
todos.remove([a,b]);
console.log("Collection size: " + todos.length);
// Collection size: 1
todos.remove(c);
console.log("Collection size: " + todos.length);
// Logs: Collection size: 0
توجع که می توانید مدل تک بفرستید، یا لیست مدل.
.{merge: true} اگه دو تا از یک اوبژه دارید، ازافه نمیشود مگه ازافه کنید با
var items = new Backbone.Collection;
items.add([{ id : 1, name: "Dog" , age: 3}, { id : 2, name: "cat" , age: 2}]);
items.add([{ id : 1, name: "Bear" }], {merge: true });
items.add([{ id : 2, name: "lion" }]); // merge: false
console.log(JSON.stringify(items.toJSON()));
// [{"id":1,"name":"Bear","age":3},{"id":2,"name":"cat","age":2}]
گرفتن مدل
است Collection.get() چندین راه وجود است مدل را بگیریم از کلکشان. ساده ترین راه با
var myTodo = new Todo({title:'Read the whole book', id: 2});
مدل را به نوع لیست بفرستید به کلکشان //
var todos = new TodosCollection([myTodo]);
var todo2 = todos.get(2); // id شماره دو ربت دارد به
مدل ها همیشه همان اوبژه هستند، اگه اواز شوند، خود اصل است که اوز می شود //
console.log(todo2 === myTodo); // یا بله true
.idAttribute و id, cid, مدل تان از سرور خواهد آمد، و محم است بتوانید تشخس کنید مدل تان. برای تشخس مدل تان می توانید استفاده کنید با
دارد id هر مدل,
برای شما اتمات درست می شود cid (client id)
جفت می توانید استفاده کنید که مدل تان را پیدا کنید در کلکشان.
نام مدل تان را نگه می دارد. idAttribute
با سی - آی - دی مدل تان را پیدا کنید و بگیرید در کلکشان //
var todoCid = todos.get(todo2.cid);
خود اوبژه پیدا می شود //
console.log(todoCid === myTodo); // true
گوش کردن به اتفاقات
می توانیم گوش کنیم وقتی که کلکشان ازافه بشد یا کم بشد:
var TodosCollection = new Backbone.Collection();
TodosCollection.on("add", function(todo) { دستور می دهیم وقتی کلکشان ازافه بشود به کنسول بروزر ازافه بشود //
console.log("I should " + todo.get("title") + ". Have I done it before? " + (todo.get("completed") ? 'Yeah!': 'No.' ));
});
TodosCollection.add([
{ title: 'go to Jamaica', completed: false },
{ title: 'go to China', completed: false },
{ title: 'go to Disneyland', completed: true }
]);
در کنسول تان می نویسد //
// I should go to Jamaica. Have I done it before? No.
// I should go to China. Have I done it before? No.
// I should go to Disneyland. Have I done it before? Yeah!
In addition, we’re also able to bind to a change event to listen for changes to any of the models in the collection.
var TodosCollection = new Backbone.Collection();
اینجا گوش می کنیم بع فرغ به اسم مدل //
TodosCollection.on("change:title", function(model) {
console.log("Changed my mind! I should " + model.get('title'));
});
TodosCollection.add([
{ title: 'go to Jamaica.', completed: false, id: 3 },
]);
var myTodo = TodosCollection.get(3);
اینجا اسم مدل را اوز می کنیم //
myTodo.set('title', 'go fishing');
// Changed my mind! I should go fishing در کنسول تان می نویسد:
می توانیم استفاده کنیم به اتفاقات مدل گوش کنیم.on
var Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
}
});
var myTodo = new Todo();
myTodo.set({title: 'Buy some cookies', completed: true});
myTodo.on({ اینجا گوش می دهیم وقتی که اسم اوز می شود یا وقتی که حال مدل اوز می شود //
'change:title' : titleChanged,
'change:completed' : stateChanged
});
function titleChanged(){
اسم اوز شد //
console.log('The title was changed!');
}
function stateChanged(){
حال اوز شد //
console.log('The state was changed!');
}
اسم مدل را اینجا اواز می کنیم //
myTodo.set({title: 'Get the groceries'});
می
توانیم
استفاده
کنیم
که
کار
فقط یک دفعه انجام شود
once()
می سازیم // counter دو تا
var TodoCounter = { counterA: 0, counterB: 0 };
دستور می دهیم گوش کند //
_.extend(TodoCounter, Backbone.Events);
را ازافه کرد هر دفعه اتفاق اوفتاده شد // counter دستور می دهیم بع کار که
var incrA = function(){
TodoCounter.counterA += 1;
TodoCounter.trigger('event');
};
// counter هم برای دومین
var incrB = function(){
TodoCounter.counterB += 1;
};
دستور می دهیم، که فقط یک دفعه اتفاق بشود // once
// our event listener
TodoCounter.once('event', incrA);
TodoCounter.once('event', incrB);
اتفاق را انجام می دهیم //
TodoCounter.trigger('event');
یک دفعه ازافه شد // counter کنسول بروزر تان می نویسد
console.log(TodoCounter.counterA === 1); // true
console.log(TodoCounter.counterB === 1); // true
زیاد می شود counter توجع: فقط یک دفعه
کلکشان پاک یا ری-ست کردن
Collection.set() ممکن است بخواهید تمام کلکشان را بخواهید اوز کنید. می شود این کار را انجام داد با
var TodosCollection = new Backbone.Collection();
TodosCollection.add([
{ id: 1, title: 'go to Jamaica.', completed: false },
{ id: 2, title: 'go to China.', completed: false },
{ id: 3, title: 'go to Disneyland.', completed: true }
]);
گوش می کنیم اگه اوبژه ای کم یا ازافه شود در کلکشان //
TodosCollection.on("add", function(model) {
زیاد شد //
console.log("Added " + model.get('title'));
});
TodosCollection.on("remove", function(model) {
کم شد //
console.log("Removed " + model.get('title'));
});
TodosCollection.on("change:completed", function(model) {
اوز شد // change قسمت
console.log("Completed " + model.get('title'));
});
TodosCollection.set([
{ id: 1, title: 'go to Jamaica.', completed: true },
{ id: 2, title: 'go to China.', completed: false },
{ id: 4, title: 'go to Disney World.', completed: false }
]);
می نویسد به کنسول //
// Completed go to Jamaica.
// Removed go to Disneyland.
// Added go to Disney World.
تمام کلکشانتان را بر می گرداند به حال اصل که اوایل بود // Collection.reset()
var TodosCollection = new Backbone.Collection();
// Collection.reset() گوش می کنیم به
TodosCollection.on("reset", function() {
console.log("Collection reset.");
});
دستور می دهیم به کلکشان ازافه کنیم //
TodosCollection.add([
{ title: 'go to Jamaica.', completed: false },
{ title: 'go to China.', completed: false },
{ title: 'go to Disneyland.', completed: true }
]);
console.log('Collection size: ' + TodosCollection.length); // Collection size: 3
TodosCollection.reset([
{ title: 'go to Cuba.', completed: false }
]);
// 'Collection reset.' به کنسول می نویسد
console.log('Collection size: ' + TodosCollection.length); // Collection size: 1
حال نفرمایید، تمام کلکشان پاک می شود Collection.reset() اگه به
این خوب هاست وقتی که می خواهید از صفه میون بری، و قسمت های صفه را پاک کنید.
myCollection.reset();
// reset() می توانیم گوش بدیم به اتفاق
var todo = new Backbone.Model();
var todos = new Backbone.Collection([todo])
.on('reset', function(todos, options) {
console.log(options.previousModels);
console.log([todo]);
console.log(options.previousModels[0] === todo); // true
});
todos.reset([]);
مدل updating می تواند استفاده شود برای set()
مدل اعلام می کنیم //
var Beatle = Backbone.Model.extend({
defaults: {
job: 'musician'
}
});
اوبژه از این مدل درست می کنیم //
var john = new Beatle({ firstName: 'John', lastName: 'Lennon'});
var paul = new Beatle({ firstName: 'Paul', lastName: 'McCartney'});
var george = new Beatle({ firstName: 'George', lastName: 'Harrison'});
var ringo = new Beatle({ firstName: 'Ringo', lastName: 'Starr'});
اوبژه ها را در لیست ازافه می کنیم به کلکشان //
var theBeatles = new Backbone.Collection([john, paul, george, ringo]);
یک اوبژه دیگه درست می کنیم //
var pete = new Beatle({ firstName: 'Pete', lastName: 'Best'});
می کنیم // updating کلکشان را
theBeatles.set([john, paul, george, pete]);
// 'Ringo' می کند به`remove`
// 'Pete' می کند به `add`
برای کار های فانکشنال Underscore
و می توانید از این استفاده کنید: Underscore چسپیده است به Backbone
: برای دونه کردن یا تک کردن هر اوبژه در لیستforEach
var todos = new Backbone.Collection();
todos.add([
{ title: 'go to Belgium.', completed: false },
{ title: 'go to China.', completed: false },
{ title: 'go to Austria.', completed: true }
]);
هر کدام از سه اوبژه خوانده می شوند //
todos.forEach(function(model){
console.log(model.get('title'));
});
به کنسول برزورتان می نویسد //:
// go to Belgium.
// go to China.
// go to Austria.
: ردیف کنید نسبت به اسم حال در مدل تانsortBy()
کلکشان را ردیف کنید نسبت به اسم //
var sortedByAlphabet = todos.sortBy(function (todo) {
return todo.get("title").toLowerCase();
});
console.log("- Now sorted: ");
sortedByAlphabet.forEach(function(model){
console.log(model.get('title'));
});
به کنسول برزورتان می نویسد در ردیف جدید //
// go to Austria.
// go to Belgium.
// go to China.
: کار اعلام کنید بع هر اوبژه در لیستmap()
var count = 1;
console.log(todos.map(function(model){
return count++ + ". " + model.get('title');
}));
به کنسول می نویسد //
//1. go to Belgium.
//2. go to China.
//3. go to Austria.
: بیشترین یا کم ترین اوبژه را می گیردmin()/max()
todos.max(function(model){
return model.id;
}).id;
todos.min(function(model){
return model.id;
}).id;
: یک اوبژه استسناع می گیرد در کلکشان pluck()
var captions = todos.pluck('caption');
// returns list of captions
: کلکشان را فیلتر کنیدfilter()
var Todos = Backbone.Collection.extend({
model: Todo,
filterById: function(ids){
return this.models.filter(
function(c) {
return _.contains(ids, c.id);
})
}
});
: اوبژه را در جای مخصوص لیست پیدا کنید و بگیریدindexOf()
var people = new Backbone.Collection;
people.comparator = function(a, b) {
return a.get('name') < b.get('name') ? -1 : 1;
};
var tom = new Backbone.Model({name: 'Tom'});
var rob = new Backbone.Model({name: 'Rob'});
var tim = new Backbone.Model({name: 'Tim'});
people.add(tom);
people.add(rob);
people.add(tim);
console.log(people.indexOf(rob) === 0); // true
console.log(people.indexOf(tim) === 1); // true
console.log(people.indexOf(tom) === 2); // true
: آیا می توانید یک اوبژه پیدا شود که حال مخصوص داشته باشدany()
todos.any(function(model){
return model.id === 100;
});
// or
todos.some(function(model){
return model.id === 100;
});
: لیست کلکشان چقدری استsize()
todos.size();
// equivalent to
todos.length;
: آیا کلکشان خالی استisEmpty()
var isEmpty = todos.isEmpty();
: کلکشان را گروهی ردیف کنیدgroupBy()
var todos = new Backbone.Collection();
todos.add([
{ title: 'go to Belgium.', completed: false },
{ title: 'go to China.', completed: false },
{ title: 'go to Austria.', completed: true }
]);
// جمع می شوند completed
جمع می شوند // incomplete
var byCompleted = todos.groupBy('completed');
var completed = new Backbone.Collection(byCompleted[true]);
console.log(completed.pluck('title'));
// ["go to Austria."] می نویسد به کنسول بروزر :
: حال که می خواهید را نشان دهیدpick()
var Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
}
});
var todo = new Todo({title: 'go to Austria.'});
console.log(todo.pick('title'));
// {title: "go to Austria"}
: حال را که نمی خواهید را قیر کنید omit()
var todo = new Todo({title: 'go to Austria.'});
console.log(todo.omit('title'));
// {completed: false}
: لیست حال مدل تان را بگیرید تکیkeys() and values()
var todo = new Todo({title: 'go to Austria.'});
console.log(todo.keys());
// ["title", "completed"]
console.log(todo.values());
// ["go to Austria.", false]
: لیست حال مدل تان را می دهد کاملیpairs()
var todo = new Todo({title: 'go to Austria.'});
var pairs = todo.pairs();
console.log(pairs[0]);
// ["title", "go to Austria."]
console.log(pairs[1]);
// ["completed", false]
: حال مدل تان را بر اکس می کندinvert()
var todo = new Todo({title: 'go to Austria.'});
console.log(todo.invert());
// {'go to Austria.': 'title', 'false': 'completed'}
پیدا کنید Underscore تمام لیست کار را می توانید در
Chainable API
می تواند استافده شود که چندین کار در ردیف شوند روی اوبژه یا روی کلکشان Underscore’s chain()
اوبژه را بر می گرداند chain()
لیست را می گرداند value()
شکل و استفادش هست اینطور:
var collection = new Backbone.Collection([
{ name: 'Tim', age: 5 },
{ name: 'Ida', age: 26 },
{ name: 'Rob', age: 55 }
]);
var filteredNames = collection.chain() به کلکشان اعلام می کنیم ازافه کرد کار به هر اوبژه در آن کلکشان //
.filter(function(item) { return item.get('age') > 10; }) بیشتر از ۱۰ باشد // age لیست را می دهد که حال
.map(function(item) { return item.get('name'); }) نام هر اوبژه ای که وجود داشته باشد بر می گرداند //
.value(); کار را اعلام می کنیم تمام و لیست را بر می گرداند //
console.log(filteredNames); // ['Ida', 'Rob']
بعزی از کار های دیگه هم لیست را بر می گردانند، مصل این:
var collection = new Backbone.Collection();
collection
.add({ name: 'John', age: 23 })
.add({ name: 'Harry', age: 33 })
.add({ name: 'Steve', age: 41 });
var names = collection.pluck('name');
console.log(names); // ['John', 'Harry', 'Steve']
RESTful Persistence
داتا در داتابیس با رست
وقتی که داتا را داتابیس بخواهید فرمایید، می توانید از سرور داتا را جمع کنید
گرفتن داتا از سرور
استسناع URL در HTTP GET استفاده می شود داتا را از سرور بگیریم با Collections.fetch()
استفاده می شود که داتا را ازافه کند به کلکشان set()
var Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
}
});
var TodosCollection = Backbone.Collection.extend({
model: Todo,
url: '/todos'
});
var todos = new TodosCollection();
todos.fetch(); // HTTP GET /todos
فرستادن داتا به سرور
HTTP POST یا HTTP PUT را استفاده می کنیم داتا ازافه کنیم به سرور با save()
مدل جدید را در سرور می نویسد Collections.create()
var Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
}
});
var TodosCollection = Backbone.Collection.extend({
model: Todo,
url: '/todos'
});
var todos = new TodosCollection();
todos.fetch();
var todo2 = todos.get(2);
todo2.set('title', 'go fishing');
todo2.save(); // sends HTTP PUT to /todos/2
todos.create({title: 'Try out code samples'}); // HTTP POST /todos کلکشان ازافه می شود
که متمعن شود داتا خالی نباشد save() صدا می شود هر دفعه با validate()
بر داشتن داتا یا پاک کردن داتا از سرور
می فرست می شود به سرور HTTP DELETE که destroy() مدل می تواند از سرور پاک شود با
var Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
}
});
var TodosCollection = Backbone.Collection.extend({
model: Todo,
url: '/todos'
});
var todos = new TodosCollection();
todos.fetch();
var todo2 = todos.get(2);
todo2.destroy(); // HTTP DELETE /todos/2 کلکشان پاک یا بر داشته می شود
باشد، نمیتوانید پاک کنید مدل را isNew: اگه مدل تان
var todo = new Backbone.Model();
console.log(todo.destroy());
// false نه یا
Options
اوپشان
استفاده کنید: {patch: true} اگه می خواهید یک قسمت مدلتان در سرور اوز شود، می توانید اوپشان
model.clear().set({id: 1, a: 1, b: 2, c: 3, d: 4});
model.save();
model.save({b: 2, d: 4}, {patch: true});
console.log(this.syncArgs.method);
// 'patch'
set() ازافه می کند بجای reset() کلکشان را با {reset: true}
را بخوانید برای اوپشانهای دیگه Backbone.js documentation
گوش کردن به اتفاقات رست
گوش دهیم: Backbone می توانیم به اتفاقات کلاسهای
• Backbone
• Backbone.Model
• Backbone.Collection
• Backbone.Router
• Backbone.History
• Backbone.View
تمام کلاس ها را به گوش می اندازد: Backbone.Events
Backbone.on('event', function() {console.log('Handled Backbone event');});
Backbone.trigger('event'); // Handled Backbone event
on(), off(), and trigger()
اجازه می دهد به اتفاقات استسناع گوش کرد Backbone.Events
مصلا:
var ourObject = {};
اتفاق را ازافه می کنیم که گوش بدیم //
_.extend(ourObject, Backbone.Events);
اعلام می کنیم اتفاق چی خواهد بود //
ourObject.on('dance', function(msg){
console.log('We triggered ' + msg);
});
دستور می دهیم چه کار انجام شود وقتی که اتفاق انجام داد //
ourObject.trigger('dance', 'our event');
می توانیم به اتفاقات اسم و کار بفرماییم :
var ourObject = {};
اوبژه مان را دستور می دهیم به گوش کردن بفرماید //
_.extend(ourObject, Backbone.Events);
یک کار اعلام می کنیم وقتی که اتفاق افتاد //
function dancing (msg) { console.log("We started " + msg); }
با اسم یا نام مخصوص اتفاقات را مشخس می کنیم //
ourObject.on("dance:tap", dancing);
ourObject.on("dance:break", dancing);
اتفاق را انجام می دهیم //
ourObject.trigger("dance:tap", "tap dancing. Yeah!");
ourObject.trigger("dance:break", "break dancing. Yeah!");
به این اتفاق گوش نکردیم و نمی دیم //
ourObject.trigger("dance", "break dancing. Yeah!");
برای هر چه یا تمام اتفاقات گوش کردن استفاده می شود : all
var ourObject = {};
_.extend(ourObject, Backbone.Events);
function dancing (msg) { console.log("We started " + msg); }
ourObject.on("all", function(eventName){
console.log("The name of the event passed was " + eventName);
});
هر کدام اتفاقات را گوش می کنیم //
ourObject.trigger("dance:tap", "tap dancing. Yeah!");
ourObject.trigger("dance:break", "break dancing. Yeah!");
ourObject.trigger("dance", "break dancing. Yeah!");
گوش کردن به اتفاق را خاموش می کند: off
var ourObject = {};
_.extend(ourObject, Backbone.Events);
function dancing (msg) { console.log("We " + msg); }
ourObject.on("dance:tap", dancing);
ourObject.on("dance:break", dancing);
ourObject.trigger("dance:tap", "started tap dancing. Yeah!");
ourObject.trigger("dance:break", "started break dancing. Yeah!");
گوش کردن را بر می داریم از اوبژه هایمان //
ourObject.off("dance:tap");
می بینیم که بعد از اتفاق دیگه گوش نمی دهیم، و کار نمی شود //
ourObject.trigger("dance:tap", "stopped tap dancing."); // won't be logged as it's not listened for
ourObject.trigger("dance:break", "break dancing. Yeah!");
تمام دستور گوش کردن مان را یک دفعه ای خاموش می کند off()
اگه بخواهیم فقط یکی از اعلام گوش را خاموش کنیم، باید آن اوبژه را در حال بفرستیم:
var ourObject = {};
_.extend(ourObject, Backbone.Events);
function dancing (msg) { console.log("We are dancing. " + msg); }
function jumping (msg) { console.log("We are jumping. " + msg); }
ourObject.on("move", dancing);
ourObject.on("move", jumping);
ourObject.trigger("move", "Yeah!");
یکی از اوبژه هایی که گوش می دهیم را خاموش می کنیم //
ourObject.off("move", dancing);
بعد، اتفاق فقط به آن یکی که مانده گوش می کند //
ourObject.trigger("move", "Yeah, jump, jump!");
را بالا استفاده کردیم که اتفاق را انجام دهد // trigger
var ourObject = {};
_.extend(ourObject, Backbone.Events);
function doAction (msg) { console.log("We are " + msg); }
ourObject.on("dance", doAction);
ourObject.on("jump", doAction);
ourObject.on("skip", doAction);
اتافاق انجام شود //
ourObject.trigger("dance", 'just dancing.');
بیشتر از یک اتفاق انجام شود //
ourObject.trigger("dance jump skip", 'very tired from so much action.');
می تواند به بیشتر از یک اتفاق کار کند یا بیشتر از یاک اتفاق برای بیشتر از یک اوبژه // trigger
چندین اتفاق یک اوبژه //
ourObject.trigger("dance", 'dancing', "5 minutes");
چندین اتفاق برای بیشتر از یک اوبژه //
ourObject.trigger("dance jump skip", 'on fire', "15 minutes");
listenTo( ) و stopListening( )
گوش می کند به اتفاقات اوبژه های دیگه listenTo()
این اتفاق گوش را خاموش می کند stopListening()
var a = _.extend({}, Backbone.Events);
var b = _.extend({}, Backbone.Events);
var c = _.extend({}, Backbone.Events);
اعلام می کنیم به اتفاقات اوبژه های دیگه گوش دهیم //
a.listenTo(b, 'anything', function(event){ console.log("anything happened"); });
a.listenTo(c, 'everything', function(event){ console.log("everything happened"); });
اتفاق را اجراع می کنیم //
b.trigger('anything'); // logs: anything happened
گوش کردن را بر می داریم //
a.stopListening();
اتفاقات دیگه کار را اجرا انجام نمی دهند //
b.trigger('anything');
c.trigger('everything');
وقتی که صفه بر داشته می شود، گوش کردن اوبژه های مختلف خاموش می شوند
Events and Views
اتفاقات و ویو
در ویو می توانید به دو نوع اتفاق گوش دهید، اتاقات در صفه یا اتفاقات در صدا کردن به سرور.
انجام می شوند. this اتفاقات صفه با
انجام می شود. apiEvent اتفاقات سرور با
این تمرین دو تا را نشان می دهد:
<div id="todo">
<input type='checkbox' />
</div>
var View = Backbone.View.extend({
el: '#todo',
می چسپانیم به اتفاقات صفه ای //
events: {
'click [type="checkbox"]': 'clicked',
},
initialize: function () {
گوش می کنیم به کلیک موش //
this.$el.click(this.jqueryClicked);
گوش می کنیم به صدا کردن به سرور //
this.on('apiEvent', this.callback);
},
// 'this' صفه است
clicked: function(event) {
console.log("events handler for " + this.el.outerHTML);
this.trigger('apiEvent', event.type);
},
// 'this' اتفاقات صفه وجود دارند در
jqueryClicked: function(event) {
console.log("jQuery handler for " + this.outerHTML);
},
callback: function(eventType) {
console.log("event type was " + eventType);
}
});
var view = new View();
روتر
روتر اجازه می دهد صفه راهنمایی.
این هاست مصلا راهنمایی صفه چطور می توانند وجود باشند:
http://example.com/#about
http://example.com/#search/seasonal-horns/page2
یک برنامه معمولا می تواند هد اقل یک راه داشته باشد:
'route' : 'mappedFunction'
بنویسیم. Backbone.Router می توانیم اوالین راهنماییمان را با
var TodoRouter = Backbone.Router.extend({
روت مان را اعلام می کنیم //
routes: {
"about" : "showAbout",
/* http://example.com/#about */
"todo/:id" : "getTodo",
می برد قسمت دیگه //
/* http://example.com/#todo/5 */
"search/:query" : "searchTodos",
/* http://example.com/#search/job */
"search/:query/p:page" : "searchTodos",
می توانیم هر چند تا راه اعلام کنیم //
},
showAbout: function(){
},
getTodo: function(id){
کار که انجام می شود در این راه //
console.log("You are trying to reach todo " + id);
},
searchTodos: function(query, page){
کار که انجام می شود در این راه //
var page_number = page || 1;
console.log("Page number: " + page_number + " of the results for todos containing the word: " + query);
}
});
حالا روتر شکل دادیم، یک اوبژه باید بسازیم //
var myTodoRouter = new TodoRouter();
بهتر است بیشتر از یک یا دو اوبژه روتر ساخته نشود
Backbone.history
را فرمایش دهد که از صفه بتوانیم راهنمایی بنمایید به صفه دیگه hashchange استفاده می شود که اتفاقات Backbone.history
کند: hashchange دستور می دهد برنامه دنباله Backbone.history.start()
var TodoRouter = Backbone.Router.extend({
راه های برنامه را اعلام کنید //
routes: {
"about" : "showAbout",
"search/:query" : "searchTodos",
"search/:query/p:page" : "searchTodos"
},
showAbout: function(){},
searchTodos: function(query, page){
var page_number = page || 1;
console.log("Page number: " + page_number + " of the results for todos containing the word: " + query);
}
});
var myTodoRouter = new TodoRouter();
Backbone.history.start();
در کنسول تان خواهد نوشت //
// http://.../#search/job/p3 logs: Page number: 3 of the results for todos containing the word: job
// http://.../#search/job logs: Page number: 1 of the results for todos containing the word: job
// ..
استفاده کنید navigate() اوز شود، برای ای URL اگه دوست دارید
var TodoRouter = Backbone.Router.extend({
routes: {
"todo/:id": "viewTodo",
"todo/:id/edit": "editTodo"
// ... other routes
},
viewTodo: function(id){
console.log("View todo requested.");
this.navigate("todo/" + id + '/edit'); اسم راه را اینجا می دهید //
},
editTodo: function(id) {
console.log("Edit todo opened.");
}
});
var myTodoRouter = new TodoRouter();
Backbone.history.start();
می توانید هم راهنمایش را بنمایید: trigger:true با
var TodoRouter = Backbone.Router.extend({
routes: {
"todo/:id": "viewTodo",
"todo/:id/edit": "editTodo"
// ... other routes
},
viewTodo: function(id){
console.log("View todo requested.");
this.navigate("todo/" + id + '/edit', {trigger: true}); اسم و راه نمایش //
},
editTodo: function(id) {
console.log("Edit todo opened.");
}
});
var myTodoRouter = new TodoRouter();
Backbone.history.start();
اتفاق راه اوز شدن است: “route”
Backbone.history.on('route', onRoute);
// Trigger 'route' event on router instance.
router.on('route', function(name, args) {
console.log(name === 'routeEvent');
});
location.replace('http://example.com#route-event/x');
Backbone.history.checkUrl();
