两次渲染星形的Raty插件

Question

正如title所指定的，我在我的一个表单模板中添加了一个raty star插件(只做了一次)，但是由于某些原因，脚本注入了两次star。

    <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>

我没有手动输入，实际上是在遵循一个似乎可以正确渲染它的教程。下面是我在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>

我已经看到这个问题在2011年发布过一次，但它对我没有帮助。如果任何人对raty的双重渲染问题有任何想法，请帮助。我试着改变了星星的数量和#星级div周围的div，但同样不起作用。

Answer 1

通过添加第一行，你可以告诉插件，如果你调用render两次，就销毁所有渲染过的星星。这是使用backbone时的一个常见问题，因为页面并没有完全刷新，它只是渲染了两次。还有一个onRender模式，对于任何有/将有这个问题的人来说，对Backbone都非常有帮助。

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