Escopo dos ambientes das Widgets. Um código conflita com outro?

Estou com um problema que o suporte diz que é de minha responsabilidade.

Já postei aqui o problema e colega @Allan Khel reproduziu o mau funcionamento.

Então, deve ser mesmo uma falta de competência de minha parte, por não entender o conceito de Widgets e sua área de influência.

Então, se puderem me ajudar, gostaria de saber: o código javascript de uma Widget, posto em chamadas na seção Local, pode interferir em funções com nomes diferentes, referenciando-se a elementos html com ids diferentes, funções estas que estão também na seção local de suas respectivas Widgets?

Ambas funções têm o mesmo procedimento interno a elas, fazem a mesma coisa, mas como dito, com referências a elementos html únicos.

Este é o html da Widget 'Compliance':

<div id="MyWidget_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="MyWidget.instance()">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <div class="panel panel-default">
    <div class="panel-body">
    <button type="button" id="idBtnNotProcurar" name="namBtnMomProcurar" style="margin-bottom:10px;color:coral;font-weight:bold;" class="btn btn-default" data-procuramomento><h2></h2>Carregar a lista de publicações do Momento Compliance</h2></button>
        <select id="idSelMomArquivos" name="namSelMomArquivos" class="form-control" data-mostraedicao>
        </select>
    </div>
</div>
</div>

Este é o seu javascript:

var MyWidget = SuperWidget.extend({
      //variáveis da widget
    variavelNumerica: null,
    variavelCaracter: null,

    //método iniciado quando a widget é carregada
    init: function() {
            },

    //BIND de eventos
    bindings: {
        local: {
            'execute': ['click_executeAction'],
            'mostraedicao':['change_fMostraEdicao'],
            'procuramomento':['click_fProcuraMomento']
        },
        global: {}
    },
     executeAction: function(htmlElement, event) {
        //alert ("passou no executeAction");
    },
    fProcuraMomento: function (elementoProvocador,eventoPassado){
        //var qtdElementos=jQuery("#idSelMomArquivos").children('option').length;
        localStorage.setItem("concatena","");
        var objSel=jQuery("#idSelMomArquivos");
        objSel.empty();
        var concatena='<option value="0" title="0">Escolha uma edição...</option>';
        jQuery.get("/api/public/ecm/document/listDocument/17",function(retorno){
            jQuery.each(retorno.content,function (k,v){
                var comentarios=v.additionalComments;
                if(comentarios==""){
                    comentarios="O arquivo da notícia "+v.description+" está sem o comentário no metadados. Adicione esta informação na propriedade do arquivo";
                }
                concatena=concatena+'<option value="'+v.id+'" title="'+v.id+'">'+comentarios+'</option>';
                localStorage.setItem("concatena",concatena);
            });//each
            objSel.append(localStorage.getItem("concatena"));
    });//get
    }//fProcuraMomento
    ,
    fMostraEdicao:function(elementoProvocador,eventoPassado){
        var docId=jQuery("#idSelMomArquivos option:selected").val();
        var txtRotulo=jQuery("#idSelMomArquivos option:selected").text();
        var docVersion="1000";
        if(docId * 1 > 0){
        var parentOBJ;

        if (window.opener) {
            parentOBJ = window.opener.parent;
        } else {
            parentOBJ = parent;
        }

        var cfg = {
            url : "/ecm_documentview/documentView.ftl",
            maximized : false,
            title : txtRotulo,
            callBack : function() {
                parentOBJ.ECM.documentView.getDocument(docId, docVersion);
            },
            customButtons : []
        };
                    parentOBJ.ECM.documentView.panel = parentOBJ.WCMC.panel(cfg);
        }//if docId
    }//fMostraEdicao
});

Outra Widget, de nome 'Noticias'. Seu html é

<div id="MyWidget_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="MyWidget.instance()">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <div class="panel panel-default">
    <div class="panel-body">
    <button type="button" id="idBtnNotProcurar" name="namBtnNotProcurar" style="margin-bottom:10px;color:coral;font-weight:bold;" class="btn btn-default" data-procuranoticia><h2></h2>Carregar a lista de notícias de interesse geral</h2></button>
        <select id="idSelNotArquivos" name="namSelNotArquivos" class="form-control" data-mostranoticia>
        </select>
    </div>
</div>
</div><!--  widget -->

Seu javascript é:

var MyWidget = SuperWidget.extend({
    //variáveis da widget
    variavelNumerica: null,
    variavelCaracter: null,

    //método iniciado quando a widget é carregada
    init: function() {
            },

    //BIND de eventos
    bindings: {
        local: {
            'execute': ['click_executeAction'],
            'mostranoticia':['change_fMostraNoticia'],
            'procuranoticia':['click_fProcuraNoticia']
        },
        global: {}
    },
     executeAction: function(htmlElement, event) {
        //alert ("passou no executeAction");
    },
    fProcuraNoticia: function (elementoProvocador,eventoPassado){
        //var qtdElementos=jQuery("#idSelNotArquivos").children('option').length;
        localStorage.setItem("concatena","");
        var objSel=jQuery("#idSelNotArquivos");
        objSel.empty();
        var concatena='<option value="0" title="0">Escolha uma notícia...</option>';
        jQuery.get("/api/public/ecm/document/listDocument/12",function(retorno){
            jQuery.each(retorno.content,function (k,v){
                var comentarios=v.additionalComments;
                if(comentarios==""){
                    comentarios="O arquivo da notícia "+v.description+" está sem o comentário no metadados. Adicione esta informação na propriedade do arquivo";
                }
                concatena=concatena+'<option value="'+v.id+'" title="'+v.id+'">'+comentarios+'</option>';
                localStorage.setItem("concatena",concatena);
            });//each
            objSel.append(localStorage.getItem("concatena"));
    });//get
    }//fProcuraNoticia
    ,
    fMostraNoticia:function(elementoProvocador,eventoPassado){
        var docId=jQuery("#idSelNotArquivos option:selected").val();
        var txtRotulo=jQuery("#idSelNotArquivos option:selected").text();
        var docVersion="1000";
        if(docId * 1 > 0){
        var parentOBJ;

        if (window.opener) {
            parentOBJ = window.opener.parent;
        } else {
            parentOBJ = parent;
        }

        var cfg = {
            url : "/ecm_documentview/documentView.ftl",
            maximized : false,
            title : txtRotulo,
            callBack : function() {
                parentOBJ.ECM.documentView.getDocument(docId, docVersion);
            },
            customButtons : []
        };
                    parentOBJ.ECM.documentView.panel = parentOBJ.WCMC.panel(cfg);
        }//if docId
    }//fMostraNoticia

});

Qual o escopo, qual o alcance do código javascript entre as Widgets?

compartilhar
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

2 respostas

Não é a resposta que estava procurando? Procure outras perguntas com as tags widget javascript escopo ou faça a sua própria pergunta.