Как обновить партиалы

Привет, пользователи RactiveJS, я здесь новенький, и я очень рад использованию RactiveJS, но я задумался, могу ли я обновить шаблон/данные внутри экземпляра Ractive.

У меня есть следующее модальное окно:

<div id="modal" intro-outro="fade:100">
    <div id="content">{{>content}}</div>
</div>

А >content — это шаблон ранжирования. Представьте, что нажатие на игрока должно перезаписать рейтинг с помощью шаблона playerProfile и запрошенных данных. Есть ли другой способ сделать это, кроме демонтажа, а затем повторно инициализировать модальное окно с помощью шаблона playerProfile?

ОБНОВЛЕНИЕ

Я забыл упомянуть, что на данный момент в окне будет около 20 шаблонов (количество будет увеличиваться в будущем по мере усложнения игры). Окно, о котором я говорю, — это главное модальное окно, в котором отображаются все шаблоны, запускаемые пользователем, такие как рейтинги, письма, отчеты, племена, карты и т. д.

С уважением.

ВРЕМЕННОЕ РЕШЕНИЕ Ответ Марти правильный, но я бы предпочел не усложнять себе жизнь и просто создавать новые экземпляры Ractive внутри #content div, чем создавать разные экземпляры всего модального окна, которое будет отображаться при инициализации и скрываться при разборке.


ractivejs
person Eduard    schedule 18.05.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если у вас есть только два состояния (в отличие от динамизма с открытым концом), вы можете заблокировать их условно:

<div id="modal" intro-outro="fade:100">
    <div id="content">
        {{^selected}}{{>partial1}}{{/}}
        {{#selected}}{{>partial2}}{{/}}
    </div>
</div>

Вы можете дополнить модель данных после первоначального рендеринга. Предположим, у вас есть обработчик кликов игрока:

ractive.on('playerSelected', function(e){
    //however your data works...
    $.get('/player?id=' + e.context.id, function(data){
        ractive.set(e.keypath + '.player', data.player)
        ractive.set(e.keypath + '.selected', true)
    })
})

Если вам нужен более динамичный подход, вы можете использовать компонент для динамической установки партиала. Вот пример (http://jsfiddle.net/9Vja5/2/) того, как вы можете сделать это в 4.0 (4.1 предложит несколько улучшений в этой области). Используйте компонент в основном шаблоне:

<div>
    {{#reset}}
    <dynamicPartial partial='{{partial}}'/>
    {{/}}
</div>

Затем установите шаблон на предоставленный партиал в компоненте beforeInit:

Ractive.components.dynamicPartial = Ractive.extend({
    beforeInit: function(o){
        o.template = '{{>' + o.data.partial + '}}'
    }
})

Частичные части должны быть определены либо глобально, либо в динамическом компоненте.

Я использую частичное, потому что это то, что у вас было в вашем вопросе. Вы можете установить шаблон напрямую, если у вас есть список шаблонов для назначения. Или вы также можете установить шаблон для компонента через '<' + component + '/>'.

Сброс — это своего рода хак, чтобы заставить Ractive повторно визуализировать компонент:

r.observe('partial', function(){
    r.set('reset', false)
    r.set('reset', true)
})

В противном случае он просто изменит данные в том же экземпляре компонента, что не позволит ему воссоздать и назначить новый шаблон.

person martypdx    schedule 18.05.2014
comment
@martydpx Я прочитал ваш ответ, и он соответствует моим потребностям, проблема в том, что ранжирование - не единственный шаблон, который будет обернут окном. Есть около 20 других шаблонов, которые могут иметь такое же поведение, поскольку я говорю об игре. Мне очень жаль, что я не уточнил, я сразу обновлю вопрос. - person Eduard; 19.05.2014
comment
@edduvs добавил динамический частичный пример, чтобы дать вам некоторые идеи - person martypdx; 19.05.2014
comment
Все в порядке, вместо того, чтобы усложнять себе это, я просто подожду, пока RactiveJS получит дальнейшее развитие в этой области, и я просто избавлюсь от экземпляра ractive окна и вставлю его в dom при загрузке страницы, а затем просто создайте новые экземпляры шаблонов внутри div содержимого, чтобы окну не нужно было разрывать, а затем снова запускать. - person Eduard; 19.05.2014