محمد افاضاتی

دیده ها، شنیده ها و علاقه مندی های یک برنامه نویس
چهارشنبه, ۱۵ شهریور ۱۳۹۱، ۰۳:۲۲ ب.ظ

View و Templating

یکی از مهمترین قسمت‌های الگوهای طراحی (هر سه مورد MVVM MVC MVP ) قسمت View آن است.
اینکه داده‌ای که داده شده است کجا تبدیل به template می شود؟
به هر صورت باید در container view مربوط به application دیتای مورد نظر را نشان داد. روش خیلی ساده این است که کل html را از سرور بگیرید. در حقیقت model شما یک قسمت داشته باشد به اسم raw html و هر دفعه آن را نمایش دهید. که البته دیتای بیهوده زیادی هر دفعه باید منتقل شود.
روش دوم این است که html را بسازید. به مثال توجه کنید.

$("#views").empty();
var container = $("<div />").attr({id: "user"});
var name = $("<span />").text(data.name);
$("#views").append(container.append(name));


به راحتی html ساخته می‌شود ولی آیا برای هر html ی باید code مربوطه کامل در قسمت javascript بیاید؟ تغییرات html این کار بسیار دشوار است و در نهایت قسمت javascript هم کد بیهوده زیادی خواهد داشت.
تعداد زیادی برنامه template rendering در javascript هست.


به طور مثال با استفاده از milk یک قالب می سازیم.

Milk.escape('<tag type="evil">');  // => '&lt;tag type=&quot;evil&quot;&gt;'

Milk.escape = function(str) { return str.split("").reverse().join("") };

// Milk.escape is used to handle all escaped tags
var template = "{{data}} is {{{data}}}";
Milk.render(template, { "data": "reversed" });  // => "desrever is reversed"

همانطور که در مثال می‌بینیم Template را با Date مربوطه Render میکنیم. و کارهایی مثل escape, helper, partial template هم انجام می دهد.
Tag های قالب هم مثل mustache می باشد.
در حقیقت Event هم می تونه جزئی از view باشد. قبل‌تر هم گفتم بهتر است که deligate بر روی قسمت‌های کوچک‌تر قالب باشد. وقتی container مربوط به View شما مشخص است چه بهتر که بر روی همان deligate را انجام دهید و در نهایت به یک action برسید.
از طرفی نیاز هست که هر view قابلیت render مجدد داشته باشد. Data ممکن است تغییر کند و با هر تغییر باید render انجام شود (از طریق model یا …)

backbone.js view
در backbone هم قسمتی هست که نیاز است همه event ها bind شود و …
 

var DocumentRow = Backbone.View.extend({

  tagName: "li",

  className: "document-row",

  events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  },

  render: function() {
    ...
  }

});


اسامی tagName و className و id در حقیقت آدرس RootElemnt هستند. که می‌توان در render از آن استفاده کرد.
از طرفی event هم دو قسمت دارد که اول نوع event و دوم elementi که بر روی آن deligate صورت می‌گیرد است. مورد روبروی هر کدام هم در حقیقت this.title هست که می‌شود مستقیماً یک function باشد.
برای render هم مثلاً شما از milk استفاده می‌کنید همچین کدی را خواهید داشت.

Template = $(this.tagName)
Milk.render(template, this.data);


data هم از طریقModel باید تأمین شود.



نوشته شده توسط محمد افاضاتی
ساخت وبلاگ در بلاگ بیان، رسانه متخصصان و اهل قلم

محمد افاضاتی

دیده ها، شنیده ها و علاقه مندی های یک برنامه نویس
محمد افاضاتی
محمد افاضاتی برنامه نویس python php دیتابیس های postgresql mongodb و ...

رونوشتی از علاقه مندی هایم برای ماندگار تر شدن!

تبلیغات

طبقه بندی موضوعی

Feedburner RSS

Others

توییتر

View و Templating

چهارشنبه, ۱۵ شهریور ۱۳۹۱، ۰۳:۲۲ ب.ظ

یکی از مهمترین قسمت‌های الگوهای طراحی (هر سه مورد MVVM MVC MVP ) قسمت View آن است.
اینکه داده‌ای که داده شده است کجا تبدیل به template می شود؟
به هر صورت باید در container view مربوط به application دیتای مورد نظر را نشان داد. روش خیلی ساده این است که کل html را از سرور بگیرید. در حقیقت model شما یک قسمت داشته باشد به اسم raw html و هر دفعه آن را نمایش دهید. که البته دیتای بیهوده زیادی هر دفعه باید منتقل شود.
روش دوم این است که html را بسازید. به مثال توجه کنید.

$("#views").empty();
var container = $("<div />").attr({id: "user"});
var name = $("<span />").text(data.name);
$("#views").append(container.append(name));


به راحتی html ساخته می‌شود ولی آیا برای هر html ی باید code مربوطه کامل در قسمت javascript بیاید؟ تغییرات html این کار بسیار دشوار است و در نهایت قسمت javascript هم کد بیهوده زیادی خواهد داشت.
تعداد زیادی برنامه template rendering در javascript هست.


به طور مثال با استفاده از milk یک قالب می سازیم.

Milk.escape('<tag type="evil">');  // => '&lt;tag type=&quot;evil&quot;&gt;'

Milk.escape = function(str) { return str.split("").reverse().join("") };

// Milk.escape is used to handle all escaped tags
var template = "{{data}} is {{{data}}}";
Milk.render(template, { "data": "reversed" });  // => "desrever is reversed"

همانطور که در مثال می‌بینیم Template را با Date مربوطه Render میکنیم. و کارهایی مثل escape, helper, partial template هم انجام می دهد.
Tag های قالب هم مثل mustache می باشد.
در حقیقت Event هم می تونه جزئی از view باشد. قبل‌تر هم گفتم بهتر است که deligate بر روی قسمت‌های کوچک‌تر قالب باشد. وقتی container مربوط به View شما مشخص است چه بهتر که بر روی همان deligate را انجام دهید و در نهایت به یک action برسید.
از طرفی نیاز هست که هر view قابلیت render مجدد داشته باشد. Data ممکن است تغییر کند و با هر تغییر باید render انجام شود (از طریق model یا …)

backbone.js view
در backbone هم قسمتی هست که نیاز است همه event ها bind شود و …
 

var DocumentRow = Backbone.View.extend({

  tagName: "li",

  className: "document-row",

  events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  },

  render: function() {
    ...
  }

});


اسامی tagName و className و id در حقیقت آدرس RootElemnt هستند. که می‌توان در render از آن استفاده کرد.
از طرفی event هم دو قسمت دارد که اول نوع event و دوم elementi که بر روی آن deligate صورت می‌گیرد است. مورد روبروی هر کدام هم در حقیقت this.title هست که می‌شود مستقیماً یک function باشد.
برای render هم مثلاً شما از milk استفاده می‌کنید همچین کدی را خواهید داشت.

Template = $(this.tagName)
Milk.render(template, this.data);


data هم از طریقModel باید تأمین شود.

موافقین ۳ مخالفین ۰ ۹۱/۰۶/۱۵
محمد افاضاتی event milk javascript template view mustache mvc

نظرات  (۱)

۱۸ شهریور ۹۱ ، ۰۸:۳۵ محمدرضا سلطانی
 بسم الله....
سلام...واقعا ممنونم جناب افاضاتی...واقعا لطف کردین....انشالله بتونم جبران کنم این لطفتونو :)

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی