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

Question

我有一个由 JSViews 模板生成的照片库，带有一个赞成和反对按钮。 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。你是调用链接方法，还是只调用渲染方法？除非您实际使用 JsViews 链接方法进行数据链接，否则您上面的数据链接表达式将不起作用。

如果您要进行数据链接，则需要调用$.observable(listItem).setProperty("Score", listItem.Score+1); - 这将自动更新<span data-link="Score"></span> 等数据链接表达式或{^{:Score}} 等数据链接标签。

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