OctoberCMS Javascript API AJAX 调用组件函数以更新组件的部分

Question

所以我有以下文件结构：

plugins/myname/pluginname/components/pluginname/default.htm
plugins/myname/pluginname/components/PluginName.php

default.htm 充当组件的一部分。 我有以下 JS API

setInterval(function(){
    $.request('onEverySecond', {
        update: {'@default.htm':'#rate-marquee'},
        complete: function() {
            console.log('Finished!');
        }
    })
}, 1000);

onEverySecond 是PluginName.php 中的一个函数，它将一个名为fx 的变量更新为default.htm。

在前端，部分default.htm 似乎已更新，但它刷新了整个部分，这不是我想要的，它导致选框一次又一次地重播，只能显示前几块内容。 我想要的只是 AJAX 将只更新数据更新的变量fx。

我怎样才能做到这一点？

编辑1：

这里是部分标记：

{% set fx = __SELF__.fx %}
<marquee id="rate-marquee" name="rate-marquee" onmouseover="this.stop();" onmouseout="this.start();">
    <ul>
        {% for item in fx %}
            <li>
            {{ item.Item | trim('u')}}: {{ item.BID }} {% if item.Revalue == 0 %} <div class="arrow-up"></div> {% else %} <div class="arrow-down"></div> {% endif %}
            </li>
        {% endfor %}
    </ul>
</marquee>

另外，这里是 PluginName.php 中的代码

public function onRun()
{
    $this->addJs('/plugins/SoyeggWebDevelopment/fxmarquee/assets/js/default.js');
    $this->updateFX();
}


public function onEverySecond()
{
    $this->updateFX();
}

public $fx;

所以 updateFX() 也可以很好地工作。

Answer 1

这里的问题似乎你正在替换 whole marquee 它导致重新渲染它。

为了解决这个问题，我们可以更新marquee中的部分

setInterval(function(){
    $.request('onEverySecond', {        
        complete: function() {
            console.log('Finished!');
        }
    })
}, 1000);

我们在这里没有做任何特别的事情，只是一个简单的ajax call

要更新marquee 的部分，我们需要assign id to it 并定义内部部分

<marquee id="rate-marquee" 
         name="rate-marquee" 
         onmouseover="this.stop();" onmouseout="this.start();">
    <ul id='rate-marquee-inner'> <!-- <= here -->
      {% partial __SELF__ ~ '::_marquee_inner' %}        
    </ul>
</marquee>

_marquee_inner.htmpartila 标记

{% set fx = __SELF__.fx %}
{% for item in fx %}
    <li>
    {{ item.Item | trim('u')}}: {{ item.BID }} {% if item.Revalue == 0 %} <div class="arrow-up"></div> {% else %} <div class="arrow-down"></div> {% endif %}
    </li>
{% endfor %}

要更新那部分，我们只需要返回标记数组

function onEverySecond() {
    $this->updateFX();
    return ['#rate-marquee-inner' => $this->renderPartial('_marquee_inner.htm')];
}

这将只是 push new updated markup 到给定的 id #rate-marquee-inner 所以现在它将 just update inner portion of marquee 和 marquee 不会重新渲染。

如有任何疑问，请发表评论。