CODEWITHSUNDEEP
javascriptjqueryoop
Ali
Ali

Reputation: 267137

Representing a div as a Javascript object?

I want to show a list of various pets on my page. Each pet would linked to a javascript object representing that pet. This is the code for my Pet class:

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
}

Using this object, I want to do this:

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());

By running this code, I want to get the following two divs to be added to my page:

<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>

The questions I have are:

1) What's the best way to write the pet.getHtml() function so that it would produce the above output? I would really prefer to not store the html inside a string within my javascript, rather I'd prefer if a template div could be stored outside the javascript somewhere, and each time that div's html is retrieved, the necessary info inserted, and the html code of the new div is returned.

2) Also, certain elements within the new div (such as the buy button) should be linked to the object that produced them, e.g the 'Buy now' buttons of the cat/dog div call the cat.buy(); and dog.buy(); methods when clicked.

How can this be accomplished?

Upvotes: 0

Views: 2521

Answers (2)

Raynos
Raynos

Reputation: 169431

There are two options here. You can either try a full blown client side MVC system for this. Personally I would recommend you look at backbone it's minimalistic and has a very lightweight View with no rendering/ui defaults.

Or write your own micro MVC system.

As for the views you can use a templating engine like EJS or jQuery tmpl.

An EJS view would be

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

Then your code would look like :

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();
    });
}

As for 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();
    });
}

Upvotes: 2

locrizak
locrizak

Reputation: 12281

Take a look at javascript templates. jQuery has a plugin in beta to accomplish this. Here are the docs.

There is a really good library called Pure that lets you integrate templates into a bunch of javascript frameworks.

Of course there are lots of docs on the subject on Google

Upvotes: 1

Related Questions