Как я могу обновить базовые данные JSViews из события onclick

У меня есть фотогалерея, созданная из шаблона JSViews с кнопками "за" и "против". OnClick запускает обновление базы данных для увеличения базовой оценки. Мне также нужно увеличить поле Score в HTML-коде, отображаемом на странице, чтобы оно соответствовало новым значениям в базе данных.

Код ниже — моя первая попытка, но она не работает. Как я мог этого добиться?

     <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();
            }
        }
    });

javascript jquery ajax jsrender jsviews
person user2427285    schedule 30.03.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я предполагаю, что вы используете JsViews, а не только JsRender. Вы вызываете метод ссылки или просто метод рендеринга? Выражения связи с данными, которые у вас есть выше, не будут работать, если вы на самом деле не связываете данные с помощью метода ссылки JsViews.

Если вы связываете данные, вам нужно вызвать $.observable(listItem).setProperty("Score", listItem.Score+1);, и это автоматически обновит либо выражения ссылки на данные, такие как <span data-link="Score"></span>, либо теги, связанные с данными, такие как {^{:Score}}.

См., например, http://www.jsviews.com/#jsvplaying, где есть два примера, которые есть кнопки «Изменить», чтобы изменить свойство имени.

person BorisMoore    schedule 31.03.2014
comment
Спасибо за комментарий Борис. Я использую JSViews и метод ссылки: template.link(#tmplTopRated, data1); Однако нет радости при обновлении значения. Я получаю Uncaught ReferenceError: listItem не определен... - person user2427285; 04.04.2014
comment
Вы выполняете {{для списка}}, поэтому перебираете некоторые элементы и хотите, чтобы код клика увеличивал свойство Score «текущего элемента списка». Итак, вам нужно получить этот предмет. Один из способов — написать: var listItem = $.view(this).data; Ознакомьтесь с примерами более подробно, а также с соответствующей документацией и описательным текстом. Вы увидите, как там реализуются подобные сценарии. (В примере я указал, чтобы увидеть строку: var dataItem = $.view(this).data;...) - person BorisMoore; 04.04.2014
comment
На самом деле вам нужно понять основы того, как привязка данных и представления работают в JsViews. Хороший план состоит в том, чтобы перейти к образцу и поиграть с изменением образца, используя вкладку «Попробовать», а затем нажав кнопку «Выполнить». Или скопируйте образец кода с вкладки «Полный код» и используйте его в качестве отправной точки для изучения собственного сценария. - person BorisMoore; 04.04.2014
comment
Кстати, вы используете data-link в нескольких местах таким образом, что это противоречит другой разметке. Связывание данных с элементом заменит содержимое элемента значением связанного выражения. Таким образом, ‹p data-link=someexpression›другой контент‹/p› заменит «другой контент». ‹span data-link=Score id=scorem›{^{:Score}}‹/span› избыточно использует как связанный элемент (который удалит содержимое), так и связанный тег в качестве содержимого. Вы можете выбрать и то, и другое... Опять же, смотрите примеры... - person BorisMoore; 04.04.2014