OctoberCMS Javascript API AJAX вызов функции компонента для обновления частичного компонента - PullRequest
Новая
       10

OctoberCMS Javascript API AJAX вызов функции компонента для обновления частичного компонента

0 голосов
/ 09 ноября 2018

Итак, у меня следующая файловая структура: 

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 () тоже работает на отлично.

1 Ответ

0 голосов
/ 12 ноября 2018

Здесь проблема, кажется, вы заменяете 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 разметка партии 

{% 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 для данного идентификатора #rate-marquee-inner, поэтому теперь он будет just update inner portion of marquee и marquee не будет повторно отображаться.

если есть сомнения, прокомментируйте.

...