Knockout Template binding with bootstrap-star-rating control

[Grass...@kungfucoder.com]

I have been round and round with this one, and just cannot seem to make any progress.  I am using the bootstrap-star-rating control found here https://github.com/kartik-v/bootstrap-star-rating, and would like to use it within a template.  No matter what incantation I try, I get a runtime javascript error indicating that the object does not support the property.

Does anyone have any ideas what could be wrong here?

My template looks like this

<script type="text/html" id="SearchResultTemplate">
  <div>
    <div class="row">
      <div class="col-md-7 col-sm-3">
        <h5 class="lblue" data-bind="html: businessName"></h5>
        <span data-bind="html: backgroundSummary"></span>
        <br/><br/>
        <div data-bind="visible: averageRatingIsKnown()"><br/>Average Rating: <span data-bind="html:averageRating()"></span>           

	  <input class="rating" data-readonly="true" data-bind="readonlyRating: averageRating(), size: 'xs'">

        </div>
      </div>
    </div>
  </div>
</script>

My custom binding code looks like this

ko.bindingHandlers.readonlyRating =
  {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext)
    {
      var value = ko.utils.unwrapObservable(valueAccessor());
      var starSize = allBindings.get('size') || 'xl';
 
      // Initialize the rating with the desired options
      $(element).rating(); //{ size: starSize, disabled:true, showClear:false, showCaption:false });
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext)
    {
      // Get the data we are bound to...
      var value = valueAccessor();
      var valueUnwrapped = ko.unwrap(value);
 
      var starSize = allBindings.get('size') || 'xl';
 
      $(element).rating('refresh', { size: starSize });
      $(element).rating('update', valueUnwrapped);
    }
  };

Any of the lines with $(element).rating(... throws the error.

The averageRating() method on my view model returns the value as expected.

[Gunnar Liljas]

http://jsfiddle.net/gliljas/8nZTF/

Nothing wrong with the binding. Have you forgotten to include the star-rating JS?

/G

[Grass...@kungfucoder.com]

No, that was my first thought as well, watching what is being loaded via Fiddler, I see both the CSS and the JS files loaded.

Even in the Fiddler you provided, I do not see the stars rendered, but at least you don't get the error.

[Gunnar Liljas]

Just to make sure, you have the JS file downloaded locally?

http://jsfiddle.net/gliljas/8nZTF/1/ (updated with needed bootstrap css)

2014-07-03 23:19 GMT+02:00 <Grass...@kungfucoder.com>:

No, that was my first thought as well, watching what is being loaded via Fiddler, I see both the CSS and the JS files loaded.

Even in the Fiddler you provided, I do not see the stars rendered, but at least you don't get the error.

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Grass...@kungfucoder.com]

OK, I wanted to circle back on this so others could benefit (Thanks Gunnar).  I took a closer look at the jsfiddler and realized that I was not including the jquery-ui components, once I added these components in, my issues went away.  This was the first time I had used a jQueryUI widget in this site.

:-).