javascript - 创建 jquery 对话框 RactiveJS 装饰器

Question

我想为 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 attribute 值更改为 false。 问题是尽管有双向绑定(bind)，但事件数据 dlgShow 并未更新，因此该值仍设置为 true。 此外，我不知道如何以编程方式获取绑定(bind)名称，即“dlgShow”。

任何帮助将不胜感激，谢谢!

Answer 1

您可以使用与装饰器本身的数据绑定(bind)，而不是使用突变观察器 - 您只需返回 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>

See example here .

(顺便说一下，在 Ractive 的开发版本中，这是 broken – 有 raised an issue 。)