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.htm partila标记

{% 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不会重新呈现。

如有疑问，请发表评论。

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

1 个答案: