Raty Plugin Rendering Stars Twice

Question

As title specifies, I am adding a raty star plugin into one of my form templates (only doing this once) but for some reason, the script injects the stars twice.

    <div id="star-rate" style="cursor: pointer;">
    <img alt="1" src="/assets/star-off.png" title="bad">
    &nbsp;
    <img alt="2" src="/assets/star-off.png" title="poor">
    &nbsp;
    <img alt="3" src="/assets/star-off.png" title="regular">
    &nbsp;
    <img alt="4" src="/assets/star-off.png" title="good">
    &nbsp;
    <img alt="5" src="/assets/star-off.png" title="gorgeous">
    <input name="review[rating]" type="hidden">
    <img alt="1" src="/assets/star-off.png" title="bad">
    &nbsp;
    <img alt="2" src="/assets/star-off.png" title="poor">
    &nbsp; 
    <img alt="3" src="/assets/star-off.png" title="regular">
    &nbsp;
    <img alt="4" src="/assets/star-off.png" title="good">
    &nbsp;
    <img alt="5" src="/assets/star-off.png" title="gorgeous">
    <input name="review[rating]" type="hidden"></div>

I didn't manually type this in and was actually following a tutorial that seemed to have this render properly. Below is the script I am running in the same template I wrote in backbone.

    <div class="form-group">
      <label for="review-rating">Rating: </label>
      <div id="star-rate"></div>
    </div>

    <script>
      $('#star-rate').raty({
      path: '/assets/',
      half: true,
      start: 0,
      scoreName: 'review[rating]'
      });
    </script>

I have seen that this question was posted once before in 2011 but it didn't help me. If anybody has any thoughts on the double rendering issue of raty, please help. I have tried changing the number of stars and the div that surrounds the #star-rating div but it also didn't work.

Answer 1

By adding the first line, you tell the plugin to destroy any stars that were rendered if you called render twice. This is a common issue using backbone because the page isnt being completely refreshed, its just rendering twice. There is also an onRender pattern that is extremely helpful for Backbone for anyone who is having/will have this issue.

    this.$('#star-rate').raty('destroy');
      this.$('#star-rate').raty({
      path: '/assets/',
      half: true,
      score: 3,
    scoreName: 'review[rating]'
    });