Блог

Я хочу показать список различных домашних животных на моей странице. Каждый элемент управления будет связан с объектом javascript, представляющим этот элемент управления. Это код для моего Pet класса:

 function Pet()
{
   var id, name, var color, var photo;
   this.getHtml = function()
   {
      // Should return the html of a div representing the pet.
      return html;
   }
   this.buy = function()
   {
      //Find out whether pet is for sale, show a buy form, etc
   }
   // Snip
}
  

Используя этот объект, я хочу сделать это:

 var cat = new Pet();
cat.id = 1;
cat.name = 'Cat';
cat.color = 'Black';
cat.photo = 'http://example.com/cat.jpg';

var dog = new Pet();
dog.id = 2;
dog.name = 'Dog';
dog.color = 'White';
dog.photo = 'http://example.com/dog400.jpg';

$(document).append(cat.getHtml());
$(document).append(dog.getHtml());
  

Запустив этот код, я хочу, чтобы на мою страницу были добавлены следующие два divs:

 <div id="pet_1">
   Pet name: Cat <br>
   Color: Black <br>
   <img src='http://example.com/cat.jpg' alt='Cat' /><br>
   <input type='button' value='Buy This Pet' onclick = 'cat.Buy()';/>
</div>

<div id="pet_2">
   Pet name: Dog <br>
   Color: White <br>
   <img src='http://example.com/dog400.jpg' alt='Dog' /><br>
   <input type='button' value='Buy This Pet' onclick = 'dog.Buy()';/>
</div>
  

У меня есть следующие вопросы:

1) Каков наилучший способ написать pet.getHtml() функцию, чтобы она выдавала вышеуказанный результат? Я бы действительно предпочел не хранить HTML-код внутри строки в моем javascript, скорее я бы предпочел, чтобы шаблон div мог храниться где-нибудь вне javascript, и каждый раз, когда извлекается HTML-код div, вставляется необходимая информация и возвращается html-код нового div.

2) Кроме того, определенные элементы внутри нового div (такие как кнопка «Купить») должны быть связаны с объектом, который их создал, например, кнопки «Купить сейчас» в div cat / dog вызывают методы cat.buy(); и dog.buy(); при нажатии.

Как это может быть достигнуто?

Здесь есть два варианта. Для этого вы можете либо попробовать полноценную клиентскую систему MVC. Лично я бы порекомендовал вам взглянуть на backbone, он минималистичен и имеет очень легкий вес View , без настроек рендеринга / пользовательского интерфейса по умолчанию.

Или напишите свою собственную систему micro MVC.

Что касается представлений, вы можете использовать механизм создания шаблонов, такой как EJS или jQuery tmpl.

Представление EJS было бы

 <div id="<%= id %>">
   Pet name: <%= name %><br>
   Color: <%= color %><br>
   <img src='<%= url %>' alt='<%= name %>' /><br>
   <input type='button' value='Buy This Pet'/>
</div>
  

Тогда ваш код выглядел бы как :

 function render() {
    var container = container || $("<div></div>").appendTo(parent);
    new EJS({url: view_url}).update(container[0], {
        id: this.id,
        color: this.color,
        url: this.url,
        name: this.name
    });
    var that = this;
    container.find(":button").click(function() {
        that.buy();
    });
}
  

Что касается jQuery tmpl

 <script id="petTemplate" type="text/x-jquery-tmpl">
    <div id="${id}">
       Pet name: ${name}<br>
       Color: ${color}<br>
       <img src='${url}' alt='${name}' /><br>
       <input class="buy" type='button' value='Buy This Pet'/>
    </div>
</script>

function render() {
    var that = this;
    $( "#petTemplate" ).tmpl( [{
        id: this.id,
        color: this.color,
        url: this.url,
        name: this.name
    }] ).appendTo( parent ).find(".buy:button").click(function() {
        that.buy();
    });
}
  

Взгляните на шаблоны javascript. У jQuery есть плагин в бета-версии для достижения этой цели. Вот документы.

Существует действительно хорошая библиотека под названием Pure, которая позволяет интегрировать шаблоны в множество фреймворков javascript.

Конечно, есть много документов на эту тему на Google