itemrenderer example 6: using the itemRenderer option

gistfile1.js

// create a custom widget to be attached to each of the items created.
$.widget("ui.customwidget", {
  options: {
    listData:null
  },
  _create: function (){
    this.element.addClass("ui-customwidget");

    $("<span></span>")
    .text(this.options.listData.data.name + " is $" + this.options.listData.data.price)
    .appendTo(this.element);

    $("<button>+ Add to Cart</button>")
    .appendTo(this.element)
    .click($.proxy(this._addToCart_clickHandler, this));
  },

  _addToCart_clickHandler: function(e){
    alert("do something here..");
  },    

  destroy: function(){
    $.Widget.prototype.destroy.apply(this, arguments);
    this.element.removeClass("ui-customwidget");
  }    
});

$(function () {

  var itemrendererOptions = {
    // asign the widget's name to be used as the itemRenderer
    itemRenderer: "customwidget",
    dataProvider: [ 
    {
      name: "lorem",
      price: 123.34
    }, 
    {
      name: "lipsum",
      price: 33.34
    },
    {
      name: "dolor",
      price: 23.34
    },
    {
      name: "sit",
      price: 623.34
    }
    ]
  };
  $("#itemrenderer").itemrenderer(itemrendererOptions);
});