初始状态已检查组件星级

时间:2019-11-26 18:27:01

标签: amp-html

此问题基于此示例https://amp.dev/documentation/examples/interactivity-dynamic-content/star_rating/

一切正常,但是现在我需要为星星设置一个初始状态,而这是行不通的。

我把我正在做的代码放在这里。

<amp-state id="ratingValues" credentials="include" src="//mydomain.com/get-rating-by-post/8">
    </amp-state>
    <div class="rating-static">
      <p style="margin-bottom: 0;line-height: 1">Valorar articulo:</p>
      <form id="rating"
            method="post"
            action-xhr="//mydomain.com/get-rating-by-post/8"
            target="_blank"
            on="submit-success:AMP.setState({ratingValues: {rating: event.response.rating}})">
        <input name="blog_id" type="hidden" id="blog_id" value="{{blog.id}}">
        <fieldset class="rating">
          <input name="rating"
                 type="radio"
                 id="rating5"
                 value="5"
                 on="change:rating.submit"
                 [checked]="ratingValues.rating > 4 ? 'checked' : ''" checked>
          <label for="rating5"
                 title="5 stars">☆</label>
          <input name="rating"
                 type="radio"
                 id="rating4"
                 value="4"
                 on="change:rating.submit"
                 [checked]="ratingValues.rating > 3 ? 'checked' : ''" checked>
          <label for="rating4"
                 title="4 stars">☆</label>
          <input name="rating"
                 type="radio"
                 id="rating3"
                 value="3"
                 on="change:rating.submit"
                 [checked]="ratingValues.rating > 2 ? 'checked' : ''" checked>
          <label for="rating3"
                 title="3 stars">☆</label>
          <input name="rating"
                 type="radio"
                 id="rating2"
                 value="2"
                 on="change:rating.submit"
                 [checked]="ratingValues.rating > 1 ? 'checked' : ''" checked>
          <label for="rating2"
                 title="2 stars">☆</label>
          <input name="rating"
                 type="radio"
                 id="rating1"
                 value="1"
                 [checked]="ratingValues.rating <= 1 ? 'checked' : ''" checked>
          <label for="rating1"
                 title="1 stars">☆</label>
        </fieldset>
        <div submit-success>
          <template type="amp-mustache">
            <p style="margin-bottom:0;line-height: 1;">Gracias por valorar con <b>{{rating}}</b> estrella(s)!</p>
          </template>
        </div>
        <div submit-error>
          <template type="amp-mustache">
            Error: {{message}}
          </template>
        </div>
      </form>
    </div>

要检查的代码的特定部分是这样的:

[checked]="ratingValues.rating <= 1 ? 'checked' : ''" checked>

0 个答案:

没有答案