Представляя div как объект Javascript?

Question

Я хочу показать список различных питомцев на своей странице.Каждый питомец будет связан с объектом 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());

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

<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 (такие как кнопка покупки) должны быть связаны с объектом, который их создал, например кнопки «Купить сейчас» наПри нажатии кнопки cat / dog div вызывают методы cat.buy(); и dog.buy();.

Как это можно сделать?

Answer 1

Здесь есть два варианта.Для этого вы можете попробовать полноценную систему MVC на стороне клиента.Лично я бы порекомендовал вам взглянуть на магистраль , он минималистичный и имеет очень легкий 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();
    });
}

Answer 2

Взгляните на шаблоны JavaScript. JQuery имеет плагин в бета-версии для этого. Вот документы .

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

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