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 中的一个函数，用于更新抛出到 default.htm.

的名为 fx 的变量

前端部分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 它导致重新渲染它。

To solve this we can just update portion inside marquee

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

We don't do anything special here just a simple 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 markup

{% 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 %}

要更新那部分我们只需要return标记数组

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

this will just push new updated markup to given id #rate-marquee-inner so now it will just update inner portion of marquee and marquee will not re-render.

如有疑问请评论。

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

OctoberCMS Javascript API AJAX call to a component function to update component's partial

javascript

ajax

octobercms