Custom Widget: First Version

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.web.min.js"></script>
<ul class="star-rating" data-bind="value: rating">
    <li data-value="1" title="One"></li>
    <li data-value="2" title="Two"></li>
    <li data-value="3" title="Three"></li>
    <li data-value="4" title="Four"></li>
    <li data-value="5" title="Five"></li>
</ul>

<div>
    <button data-bind="click: alertValue">Current value</button>
</div>

CSS

.reply-rating {
  margin: 0;
  padding: 0;
  list-style-type: none;
  cursor: default;
  display: inline-block;
}

.reply-rating li {
  margin: 0;
  padding: 0;
  display: inline-block;
  cursor: pointer;
}

.reply-rating li.reply-rating-star-full:after {
    content: "\2605";
    font-family: Arial;
    font-size: 16px;
    color: orange;
}

.reply-rating li.reply-rating-star-empty:after {
    content: "\2606";
    font-family: Arial;
    font-size: 16px;
    color: gray;
}

JavaScript

(function($, kendo, undefined) {

  var NS = ".replyRating",
    PREFIX = "Reply",
    WIDGET = kendo.ui.Widget,
    PROXY = $.proxy,
    STAR = "li",
    MOUSEOVER = "mouseover",
    MOUSELEAVE = "mouseleave",
    CLICK = "click",
    REPLY_RATING = "reply-rating";
    
  var Rating = WIDGET.extend({
    init: function (element, options) {
      var that = this;

      WIDGET.fn.init.call(that, element, options);

      element = that.element;
      options = that.options;
      
      element.addClass(REPLY_RATING)
        .on(MOUSEOVER + NS, STAR, function(e) {
          that._mouseover(e);
        })
        .on(MOUSELEAVE + NS, PROXY(that._mouseleave, that))
        .on(CLICK + NS, STAR, PROXY(that._select, that));
      element.find(STAR).addClass(options.starEmptyClass);
      
      that.value(options.value);
    },

    options: {
      prefix: PREFIX,
      name: "Rating",
      starEmptyClass: "reply-rating-star-empty",
      starFullClass: "reply-rating-star-full",
      value: null
    },
    
    value: function(value) {
      var that = this;
      
      if (value === undefined) {
        return that._currentValue;
      }
      else {
        that._currentValue = value;
        that._render(value);
      }
    },
    
    _mouseover: function(e) {
      var that = this,
        star = $(e.currentTarget),
        value = star.data('value');
      
      that._render(value);
    },
    
    _mouseleave: function() {
      var that = this;
      
      that._render(that.value());
    },
    
    _select: function(e) {
      var that = this,
        star = $(e.currentTarget),
        value = star.data('value');
      
      that.value(value);
    },
    
    _render: function(value) {
      var that = this,
        opt = that.options,
        star = that.element.find(STAR + '[data-value="' + value + '"]');
        
        if (value === null || value === undefined || star.length === 0) {
         ...