Question

我想为jQuery Dialog创建一个装饰器，以便使用数据模型打开和关闭对话框。这是模板的示例代码：

<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 。问题是ratial数据 dlgShow 不会更新，尽管twoway绑定，所以该值仍然设置为true。此外，我不知道如何以编程方式获取绑定名称，即' dlgShow '。

非常感谢任何帮助，谢谢！

Answer 1

您可以使用装饰器本身的数据绑定，而不是使用变异观察器 - 您只需要返回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。）

创建jquery对话框RactiveJS装饰器

1 个答案: