معرفی Bacbone.js

در این مقاله قصد داریم مفهوم Bacbone.js را تشریح کنیم .Bacbone.js یک کتابخانه جاوا اسکریپت است که بر اساس الگوی MVC طراحی شده است .

معرفی Bacbone.js

Bacbone.js یک کتابخانه جاوا اسکریپت است که اجازه ساخت اپلیکیشن های تحت وب مانند SPA را به ما میدهد.Bacbone.js بر اساس الگوی طراحی MVC بنا شده است .Bacbone.js برای ساخت صفحات SPA با استفاده از سرویس RestFull مناسب است .

کتابخانه جاوااسکریپت بک بن ساختاری برای طراحی برنامه های کاربردی تحت وب است .برخلاف MVC  که دارای سه کامپوننت است بک بن کامپوننت های اصلی زیر را دارد.

Model

View

Collection

Routers

Model-1 :  کار کردن بر روی مدل مهمترین قسمت هر برنامه ای است .هر برنامه ای نیاز به این دارد که دیتاها را به روش ساخت یافته منظم کند.مدل در بک بن، به ما امکان مدیریت تمام موجودیت های برنامه و همچنین اعتبارسنجی و تداوم آنها را می دهد.

var SampleModel= Backbone.Model.extend({
initialize : function(){
};
});

View-2  : ویو در بک بن برای نمایش دیتاهای مدل در UI استفاده میشود .همچنین در ویو رویدادهای مربوط به هر کدام از المان های Html اجرا می شود.

var SampleView=Backbone.View.extend({
initialize : function(){
};
});

Collection-3 : کالکشن های بک بن مجموعه ای از مدل ها هستند .برای نمونه اگر مدل را Animalدر نظر بگیریم کالکشن در واقع Zoo خواهد بود

Model: Student Collection : ClassStudents
Model: Animals Collection: Zoo

var SampleCollection= Backbone.Collection.extend({
model : SampleModel
});

4-Routers روترهای بک بن برای مسیریابی برنامه شما و اجرای کدها بر اساس URL درخواست شده و سپس رندر کردن ویو برای کاربر به کار می روند.

تنظیم Bacbone.js

بک بن وابستگی بسیار زیادی به Underscore.js و وابستگی کمی به jQuery دارد.برای افزودن بک بن به پروژه خود نیاز به موارد زیر دارید

Bacbone.js

Underscore.js

jQuery

بعد از دانلود کتابخانه های بالا نیاز دارید که آنها را به Html صفحه اصلی خود بیافزایید . مانند زیر

<html>
<HTML>
 <Head>
  <title>Backbone js Tutorial-Todo List</title>
 </Head>
 <Body>

  <script src="scripts/underscore-min.js"></script>
  <script src="scripts/jquery-1.11.3.min.js"></script>
  <script src="scripts/backbone-min.js"></script>  
 </Body>
</HTML>;