Question

我有一个JSViews模板生成的照片库，带有upvote和downvote按钮。 OnClick会触发数据库更新以增加基础分数。我还需要在页面中呈现的HTML中增加Score字段，以使其与数据库中的新值一致。

以下代码是我的第一次尝试，但它不起作用。我怎么能做到这一点？

     <script type="text/x-jsrender" id="gallerycat1">
    {{for List}}
    <ul>
        <li data-type="media" data-url="{{:MainImage}}"></li>
        <li data-thumbnail-path="{{:Thumbnail}}"></li>
        <li data-thumbnail-text>
            <p  data-link="Score"  class="largeLabel"><span id="span-a-{{:ProfileId}}">{{:Score}}</span> {{:FirstName}} {{:LastName}}, {{:Company}}</p>

            <p class="smallLabel">Click to vote.</p>
        </li>
        <li data-info="">
            <div class="voting-buttons">
                <a href="#" data-link="Score" onclick="upVote('<%= userVoted%>',{{:[ImageId]}},1);">
                    <img width="30" src="/client/images_webdev/buttons/heart.png" alt="Upvote this" />
                </a>
                <a href="#"  data-link="Score"  onclick="downVote('<%= userVoted%>',{{:[ImageId]}},0);">
                    <img data-link="Score" width="30" src="/client/images_webdev/buttons/thumbs.png" alt="Downvote this" />
                </a>

            </div>
            <p class="mediaDescriptionHeader"><span data-link="Score" id="scorem">{^{:Score}}</span> {{:FirstName}} {{:LastName}}, {{:Company}}</p>
        </li>
    </ul>
    {{/for}}
</script>

这是用于投票的onClick事件

function castVote(userVoted, imageId, vote) {
    jQuery.ajax({
        url: '/client/webservice/voting.asmx/InsertVote',
        type: "POST",
        data: "{'userVoted':'" + userVoted + "','imageId':" + imageId + ",'vote':" + vote + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {
            if (response.d == 'True') {
                var counter = jQuery('#scorem').text();
                if (vote > 0) {
                    counter++;
                } else {
                    counter--;
                }
                jQuery('#scorem').text(counter);
                upVoteConfirm();
            } else {
                downVoteConfirm();
            }
        }
    });

Answer 1

我假设您使用的是JsViews，而不仅仅是JsRender。你在调用link方法，还是只调用render方法？除非您实际使用JsViews链接方法进行数据链接，否则上面的数据链接表达式将无法工作。

如果您是数据关联，则需要致电$.observable(listItem).setProperty("Score", listItem.Score+1); - 这会自动更新<span data-link="Score"></span>等数据链接表达式或{^{:Score}}等数据链接标记。< / p>

请参阅示例http://www.jsviews.com/#jsvplaying，其中有两个示例具有“更改”按钮以修改名称属性。

如何从onclick事件更新底层JSViews数据

1 个答案: