Создать диалоговое окно jquery Декоратор RactiveJS

Я хотел бы создать декоратор для диалогового окна jQuery, чтобы открывать и закрывать диалоговое окно с использованием модели данных. Это пример кода для шаблона:

<div id="dialog-confirm" decorator="jqueryDialog" show="{{dlgShow}}" twoway="true" modal="true" title="File already exists">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>File already exists, Do you want to overwrite it?</p>
</div>

<script type="text/javascript">

var jqueryDialogDecorator = function ( node, content ) {

    var isModal = jQuery(node).attr('modal');

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.attributeName == 'show') {             
                var action = jQuery(node).attr('show') == 'true' ? 'open' : 'close';
                jQuery(node).dialog(action);
            }
        });    
    });

    observer.observe(node, {attributes: true});    

    jQuery(node).dialog({
        autoOpen: false,
        modal: isModal,
        close: function( event, ui ) {
            jQuery(node).attr('show', 'false');         
        }
    }); 

    return {
        teardown: function () {

            observer.disconnect();

        }
    }

};

</script>

Если я изменю значение dlgShow на true, диалоговое окно отобразится правильно; Функция обратного вызова при закрытии диалогового окна изменяет значение атрибута show на false. Проблема в том, что активные данные dlgShow не обновляются, несмотря на двустороннюю привязку, поэтому значение по-прежнему равно true. Кроме того, я не знаю, как программно получить имя привязки, то есть «dlgShow».

Любая помощь будет очень признательна, спасибо!


javascript jquery decorator ractivejs
person Fabrizio Stellato    schedule 09.10.2015    source источник
comment
Ошибки в консоли?   -  person Joseph    schedule 12.10.2015

Ответы (1)


arrow_upward
1
arrow_downward

Вместо использования наблюдателя мутаций вы можете использовать привязку данных к самому декоратору — вам просто нужно вернуть метод update вместе с методом teardown:

<div id="dialog-confirm" decorator="jqueryDialog:{{dlgShow}}" modal="true" title="File already exists">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>File already exists, Do you want to overwrite it?</p>
</div>

см. пример здесь.

(Кстати, оказывается, что это сломано в разрабатываемой версии Ractive — есть поднял проблему.)

person Rich Harris    schedule 12.10.2015
comment
Спасибо за ответ: однако, мне нужно вручную установить для content значение false при закрытии диалогового окна, поэтому я пропускаю код для этого - person Fabrizio Stellato; 12.10.2015