Silverstripe 每次单击按钮时，使用ajax从DataObject加载一定数量的项？

我有一个

查看更多

按钮，单击该按钮时，我希望能够将另外3个过去的事件加载到页面加载上显示的默认3个过去的事件中，然后如果再次单击，则添加另外3个，以此类推

下面的代码可以工作，但由于某些原因正在乘以数字，例如，如果我按代码现在的“查看更多”按钮，它将返回18个

过去事件

，而它应该只返回6个

过去事件

如果我

dd（$amountofcurrentPasteEvents+3）

我得到

int（6）

返回3次，6 x 3=18。e、 g:

问题是为什么它会被呼叫三次？我做错了什么

DashboardPage.php

class DashboardPage_Controller extends Page_Controller {

    private static $allowed_actions = array(
        'pastEvent',
        'seeMorePastEvents',
        'pasteventfilter',
        'LimitedPastEvents'
    );

    public function LimitedPastEvents()
    {
        return PastEvent::get()->limit(3);
    }

    public function seeMorePastEvents() {
        if (Director::is_ajax()) {
            // Gets the amount of past events that are display on the page at present
            $amountOfCurrentPastEvents = $_POST['events'];
            // Adds 3 onto how ever many past events are currently showing
            $PastEvents = PastEvent::get()->limit($amountOfCurrentPastEvents + 3);
            return $this->customise(array(
                'Results' => $PastEvents
            ))->renderWith('AjaxPastEvents');

        }
    }

    ...

}

仪表板页面.ss

<% loop LimitedPastEvents %>
    <div class="past-event-results">
        <div class="col-md-4 no-padding past-event">
            <a href="$Link">
                <div class="live-workouts-wrapper">
                    <div class="on-demand-image" style="background-image: url($ThemeDir/images/vid-3.jpg);">
                        <div class="play-icon"></div>
                    </div>
                    <div class="on-demand-info text-center">
                        <div class="on-demand-location">
                            <span class="pin-icon"></span><span>$BranchLocation.Name, $BranchLocation.City</span>
                        </div>
                        <div class="on-demand-date-time">
                            <span class="time-icon"></span>
                            <span>{$EventDate.Day} {$EventDate.ShortMonth} {$EventDate.Format(dS)} $Time.Nice</span>
                        </div>
                        <div>
                            <strong>$EventName</strong>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
<% end_loop %>

<div class="col-md-12">
    <div class="text-center">
        <button class="btn btn-seemore">SEE MORE<b class="btn-icon btn-down"></b></button>
    </div>
</div>

<script>
$(document).ready(function() {
    var pastEventCount;
    $('.btn-seemore').on('click', function(event) {
        event.preventDefault();
        // Gets the amount of past events that are currently displayed on the page
        pastEventCount = $('.past-event').length;
        console.log(pastEventCount);
        $.post('/dashboard/seeMorePastEvents', {events: pastEventCount}, function(data) {
            $('.past-event-results').html(data);
        });
    });
});
</script>

查看更多

jQuery-位于DashboardPage.ss上

<% loop LimitedPastEvents %>
    <div class="past-event-results">
        <div class="col-md-4 no-padding past-event">
            <a href="$Link">
                <div class="live-workouts-wrapper">
                    <div class="on-demand-image" style="background-image: url($ThemeDir/images/vid-3.jpg);">
                        <div class="play-icon"></div>
                    </div>
                    <div class="on-demand-info text-center">
                        <div class="on-demand-location">
                            <span class="pin-icon"></span><span>$BranchLocation.Name, $BranchLocation.City</span>
                        </div>
                        <div class="on-demand-date-time">
                            <span class="time-icon"></span>
                            <span>{$EventDate.Day} {$EventDate.ShortMonth} {$EventDate.Format(dS)} $Time.Nice</span>
                        </div>
                        <div>
                            <strong>$EventName</strong>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
<% end_loop %>

<div class="col-md-12">
    <div class="text-center">
        <button class="btn btn-seemore">SEE MORE<b class="btn-icon btn-down"></b></button>
    </div>
</div>

<script>
$(document).ready(function() {
    var pastEventCount;
    $('.btn-seemore').on('click', function(event) {
        event.preventDefault();
        // Gets the amount of past events that are currently displayed on the page
        pastEventCount = $('.past-event').length;
        console.log(pastEventCount);
        $.post('/dashboard/seeMorePastEvents', {events: pastEventCount}, function(data) {
            $('.past-event-results').html(data);
        });
    });
});
</script>

$（文档）.ready（函数（）{
var pastEventCount；
$（'.btn seemore'）。在（'click'，函数（事件）{
event.preventDefault（）；
//获取页面上当前显示的过去事件的数量
PasteEventCount=$（'.past event'）。长度；
console.log（粘贴ventcount）；
$.post（'/dashboard/seeMorePastEvents'，{events:pastEventCount}，函数（数据）{
$（'.pass event results'）.html（数据）；
});
});
});

问题是代码使用

$（'.pass event results'）.html（数据）将新内容添加到
.pass event results
，但模板有3个
。过去的事件结果开始时为
div

ajax函数返回的数据（6个PasteEvent条目）被添加到3个div中，结果显示了18个条目

以下循环首先创建3个过去事件结果：

<% loop LimitedPastEvents %>
    <div class="past-event-results">
    ...
    </div>
<% end_loop %>

DataList
limit（）
函数可以执行以下操作：

我们使用偏移量来更改提取起点

然后，我们将JavaScript更改为附加检索到的数据，而不是覆盖现有事件：

$('.past-event-results').append(data);

乍一看，这似乎是一个JS问题

您可能会发送x3 AJAX请求—如果您中断浏览器的调试器，将有多少XHR请求发送到SilverStripe

还要检查生成的标记。我怀疑您的JS逻辑应该附加到
。过去的事件结果
DOM节点本身，而不是附加到它的内容上，这本质上就是jQuery
html
方法为您所做的事情。
现在非常有意义！非常感谢，它现在工作得很好：）
$('.past-event-results').append(data);