تصویر محمدعلی اکبری

Backbone.js یک کتابخانه جاوا اسکریپت کوچک و بسیار مفید است که امکان توسعه نرم‌افزارهای پیچیده داده محور (data driven) را فرآهم می‌کند.

به بیان ساده Backbone.js به شما امکان نوشتن کدهای JavaScript به صورت ساختار یافته را می‌دهد. به این ترتیب کمک می‌کند اطلاعات مورد نیاز نرم‌افزار از لا‌به‌لای ساختار DOM صفحات خارج شود.

بگذارید با یک مثال بهتر توضیح دهیم؛ یک لیست از نام، نام خانوادگی و سن کارکنان شرکت را در نظر بگیرید. می‌خواهیم این اطلاعات را با استفاده از تکنیک‌های AJAX و در یک نرم‌افزار تک صفحه‌ای مدیریت کنیم.

بدون استفاده از Backbone.js برای ویرایش هر ردیف باید اطلاعات ویرایش شده را از ساختار DOM بیرون بکشیم، به سرور ارسال کنیم و طبق نتیجه بازگشتی ساختار DOM را به روز رسانی کنیم. بنابراین کدهای جاوااسکریپت شبیه به زیر داریم:

<form action="save.php?id=1" method="post" class="person">
  First name: <input type="text" name="firstname" /> <br/>
  Last name: <input type="text" name="lastname" /> <br/>
  Age: <input type="text" name="age" /> <br/>
  <input type="submit" value="Save" />
</form>

<script src="js/jquery-1.9.1.min.js"></script>
<script>
  $(function() {
    $(document).on("submit", "form.person", function(event) {
      event.preventDefault();
      var action = $(this).attr('action');
      var firstname = $('[name=firstname]', this).val();
      var lastname = $('[name=lastname]', this).val();
      var age = $('[name=age]', this).val();
      $.ajax({
        type: "POST",
        url: action,
        data: {
          firstname: firstname,
          lastname: lastname,
          age: age
        },
        success: function() {
          alert('Success');
        },
        error: function() {
          alert('Error');
        },
        dataType: 'json'
      });
    });
  });
</script>

همین کار را باید برای حذف، مرتب سازی و ایجاد ردیف جدید در لیست انجام دهیم. با زیاد شدن موجودیت‌های نرم‌افزار (Entitiesها) مدیریت کدها و میزان خوانایی کد و قابلیت استفاده مجدد از آن به شدت کاهش پیدا می‌کند.

با استفاده از Backbone.js برای هر فرد یک Model تعریف می‌کنیم. آنچه که این مدل را در صفحه نمایش می‌دهد یک View است. لیست این کارکنان در قالب یک Collection تعریف خواهد شد. برای تغییرات هر Model رویدادهای خاص را تعریف می‌کنیم. این Model کار ارتباط با سرور با فرمت RESTful را بر عهده خواهد داشت. به این ترتیب Model، View و Controller را از هم جدا کردیم.

با پیاده سازی همان مثال قبلی این موضوع را بهتر متوجه خواهیم شد.

<script>
$(function() {
  // Model
  var Person = Backbone.Model.extend({
    defaults: {
      firstname: '',
      lastname: '',
      age: ''
    }
  });

  // View
  var PersonView = Backbone.View.extend({
    tagName: "article",
    template: _.template($("#template-person").html()),
    render: function() {
      this.$el.html(this.template(this.model.toJSON()));
      return this;
    },
    events: {
      "click .save": "toggleDone",
    },
    toggleDone: function() {
      this.model.toggle();
    }
  });
  
  // Collection
  var Persons = Backbone.Collection.extend({
    url: 'persons.php', // returns list of persons as json
    model: Person
  });

  // Collection View
  var PersonsView = Backbone.View.extend({
    el: $('#persons-directory'),
    initialize: function() {
      this.collection.on('add', this.addOne, this);
      this.collection.on('reset', this.addAll, this);
    },
    addOne: function(person) {
      var personView = new PersonView({model: person});
      this.$el.append(personView.render().el);
    },
    addAll: function() {
      this.collection.forEach(this.addOne, this);
    },
    render: function() {
      this.addAll();
    }
  });
  
  // Running app
  persons = new Persons();
  personsView = new PersonsView({collection: persons});
  persons.fetch();
});
</script>

دیدگاه‌ها

تصویر پیام

پیام (تایید نشده)

ممنون از پست خوبتون ...

تصویر ha.azizi

ha.azizi (تایید نشده)

ممنون از مطلب خوبتون.
یک سئوال داشتم، میخواستم بدون که برای درج کد در متن از چه ماژولی در دروپال استفاده می کنید؟

تصویر محمدعلی اکبری

محمدعلی اکبری

سلام، از ماژول خاصی استفاده نمی‌کنم. فقط این تنظیمات رو انجام می‌دم تا هم توی ویرایشگر درست نشون بده و هم توی قالب اینجوری highlight کنه

1- https://github.com/trentrichardson/jQuery-Litelighter رو در theme وارد می‌کنم

2- کد زیر رو هم همینطور:

$('pre').litelighter({ style: 'dark' });

3- برای ویرایشگر از ckeditor در ماژول wysiwyg استفاده میکنم

4- تو تنظیمات ویرایشگر توی ماژول wysiwyg قسمت css این فایل رو وارد می‌کنم و گزینه Editor CSS رو Define CSS تعیین می‌کنم.

%b%t/css/editor.css

5- فایل editor.css شامل کد زیره:

pre {
  max-width: 94%;
  overflow-x: scroll;
  display: block;
  padding: 9.5px 3%;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  color: #000;
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 16px;
  white-space: pre;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  direction: ltr;
}
تصویر ha.azizi

ha.azizi (تایید نشده)

خیلی ممنون از توضیحاتتون دوست عزیز.

تصویر ha.azizi

ha.azizi (تایید نشده)

دوست عزیز در ویرایشگر tinymce هم این امکان وجود داره یا خیر؟؟
چون بنده از tinymce استفاده می کنم و geshi filter در tinymce به خوبی کار نمیکنه...!!!!

تصویر محمدعلی اکبری

محمدعلی اکبری

این امکان برای wysiwyg هست تا جایی که میدونم.

تصویر ha.azizi

ha.azizi (تایید نشده)

ممنون دوست عزیز
یعنی بعد از این مراحل با استفاده از <code> کد ها به این شکل در میاد...؟

تصویر محمدعلی اکبری

محمدعلی اکبری

بله، با استفاده از pre یا code، هر کدوم یا هر دو اگر درست کانفیگ کنید.

تصویر ha.azizi

ha.azizi (تایید نشده)

با سلام دوست عزیز
تمام مراحل را انجام دادم ولی مرحله 2 ایراد میگیره، حتی داخل تگ PHP هم گذاشتم ولی باز کار نکرد.

تصویر محمدعلی اکبری

محمدعلی اکبری

داخلی تگ PHP برای چی؟ باید یه فایل جاوا اسکریپت به theme اضافه کنید.

تصویر Farzan

Farzan (تایید نشده)

از من ناراحت نشی ولی توضیحاتت افتضاحس.
دوستان میتونن پلاگین syntaxhighlight دانلود کنن سپس کپی کنن تو پوشه پلاگین ادیتورشون.بعد کد :

 config.extraPlugins = 'syntaxhighlight';

سپس

config.toolbar = ['syntaxhighlight']

بعدشم تو فایل css  همون صفحه که قراره اطلاعات ثبت شده توسط ادیتور رو نمایش بدین یه css  برای pre بنویسید.
به همین راحتی

تصویر محمدعلی اکبری

محمدعلی اکبری

سلام دوست عزیز؛ ناراحت شدن نداره. ممنون از توضیحات شما. اما این مطلب برای Syntax Highlighter نیست و مربوط به Backbone.js بود که یکی از دوستان در مورد Syntax Highlighter مورد استفاده من سوال کردن و من توضیح دادم. من به دلایلی از این پلاگین خیلی سبک (کمتر از 1KB استفاده کردم).

ماژولی که آقای فرزام مطرح کردن در این آدرس هست: Syntax Highlighter

تصویر محمد

محمد (تایید نشده)

سلام
من یه مشکل خیلی بزگ دارم و هیچی از این بک بون نمیدونم فقط یه کار کوچیک میخام انجام بدم
به فایل .js هست که نیاز دارم یه function از اون رو تو یه کلاس دیگه صدا بزنم
اما نمیدونم تو این فایل چی کار کرده ! از بک بون استفاده کرده و صدا زدن توابع از خارج این کلاس ممکن نیست ! خواهشا کمکم کنید وقت هم ندارم خیلی این لینک متن اون فایل هست :
https://www.dropbox.com/s/41thf8ntld6e3se/file.js?dl=0
اطلاعات دیگه هم خواستید میتونم بهتون بگم فقط خواهشا کمک کنید وقت برای یادگیری بک بون ندارم اصلا !
حتی اگر هزینه بر هم هست مشکلی ندارم .

افزودن نظر جدید