Geek Answers Handbook

Handle a block of HTML code as an object?

I have a div, which is basically a book (so there is a nice div layout with a picture of the book, title, price, red background, if on sale, etc.). So what I am doing is to get the properties of the book from the database, insert the values ​​in the form of an html template and display it.

Now that it is displayed, I hate how I have to process data. I need to either analyze the css properties to find out if the book is for sale as an example, or I need to also store data in another place (some javascript array or use the jquery data function). The first option is ugly, the second requires me to update two things when one property has changed - which is also ugly.

So I would like to process this html block (which is a single book) as an object. Where can I call obj.setPrice (30); and the like, and finally call obj.update (); so he would update his appearance.

Is there any way to do this? Or something like this? I just feel that as soon as I pass the data as html, I will lose control over it :(

+4
source share
3 answers

Assume your html div is like this

<div id="book1"> <div id="price">$30</div> ... </div>

You can define the book object as follows:

 var Book = function(name) { this.name = name; } Book.prototype = { setPrice : function(price) { this.price = price; }, update : function() { pricediv = document.getElementById(this.name) pricediv.innerHTML = '$'+price; } } var book = new Book('book1') book.setPrice(50); book.update();
+3
source

I think your best shot is to write your own object / methods for this.

 var Book = function(){ var price = args.price || 0, color = args.color || 'red', height = args.height || '200px', width = args.width || '600px', template = "<div style='background-color: COLOR; width=WIDTH; height: HEIGHT;'><span>$PRICE</span><br/></div>"; return { setPrice: function(np){ price = np; return this; }, setColor: function(nc){ color = nc; return this; }, setHeight: function(nh){ height = nh; return this; }, render: function(){ template = template.replace(/COLOR/, color); template = template.replace(/PRICE/, price); // etc // use jQuery or native javascript to form and append your html $(template).appendTo(document.body); } }; };

This is just a pretty simple example that can be optimized as much. You might even consider using John Resigs microtemplate ( http://ejohn.org/blog/javascript-micro-templating/ )

Using the above example would look like this:

 var book = Book({ price: 30, color: 'blue' }); book.render();

To change the values:

 book.setPrice(140).setColor('yellow').setHeight('500').render();
+2
source

I play with Microsoft's suggestion for jQuery Templates and Data Binding, and so far this is awesome.

TL; DR, check out this demo .

It’s very easy to link a piece of HTML to a JavaScript object and from there update only the JavaScript object and HTML updates.

Here is a simple example. Create the HTML that will represent your widget.

 <div class="book"> <img width="100" height="100" src="" /> <div class="title"></div> <div class="price"></div> </div>

Then create a JavaScript object and dynamically link it to the HTML above. Here is an example object:

 var book = { title: "Alice in Wonderland", price: 24.99, onSale: true, image: "http://bit.ly/cavCXS" };

Now to the actual link. Elements we are going to relate:

  • And the data-onsale attribute in the outer div, which will be either "true" or "false"
  • Image src attribute for the image property of our book
  • title div for title property
  • price div for the price.

Listed below are links. Please note that we only do one method related here, but you can also configure two-way communication using the linkBoth function.

 $(book) .linkTo('title', '.title', 'html') .linkTo('price', '.price', 'html') .linkTo('image', '.book img', 'src') .linkTo('onSale', '.book', 'data-onsale')

What is it. From now on, just update the book object and the HTML will automatically update. Update the book properties as if you had updated the html attributes with the attr function.

 $(book).attr({ price: 14.75 });

or

 $(book).attr('price', 14.75);

The code above uses only data binding, but the proposal also mentions combining data with templates, which would make it even easier. From what I believe you could do this and get the above functionality:

 <script id="bookTemplate" type="text/html"> <div class="book" data-onsale="{{link onSale }}"> <img width="100" height="100" src="{{link image }}" /> <div class="title">{{link title }}</div> <div class="price">{{link price }}</div> </div> </script>

Link the above template to the book object in one step and add it to the page:

 $('#bookTemplate').render(book).appendTo('body')

Update the properties of the book object and the changes will be reflected.

+1
source

More articles:


All Articles