【问题标题】:Raty Plugin Rendering Stars TwiceRaty 插件两次渲染星星
【发布时间】:2015-11-07 05:02:48
【问题描述】:

正如标题所指定的,我在我的一个表单模板中添加了一个评级星插件(只执行一次),但由于某种原因,脚本注入了两次星星。

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

我没有手动输入这个,实际上是按照一个似乎正确渲染的教程。下面是我在主干中编写的同一模板中运行的脚本。

    <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 年发布过,但对我没有帮助。如果有人对比率的双重渲染问题有任何想法,请提供帮助。我尝试更改星数和#star-rating div 周围的div,但也没有用。

【问题讨论】:

  • 也许javascript被调用了两次?
  • 是的,我认为是这样,因为修复方法是首先获取脚本并将其放入正确的 js 视图中,然后将 this.$('#star-rate').raty('destroy'); 作为初始行以删除所有当前渲染的星星.

标签: ruby-on-rails backbone.js raty


【解决方案1】:

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-09-25
    • 2023-03-02
    • 1970-01-01
    • 1970-01-01
    • 2016-01-26
    • 1970-01-01
    • 2018-11-06
    相关资源
    最近更新 更多