Chiudi modal che è stata creata in un'altra funzione evento

Question

Sul mio primo evento aprirò una finestra di dialogo mbox. mbox è una sorta di estensione per il bootbox, che è per mostrare una modale. Ho bisogno di mbox per usare un altro modello come contenuto modale.

Quindi nel file modale verrà caricato il contenuto di createElement-Template. Se l'utente ha apportato alcune modifiche di input, la modale dovrebbe essere chiusa. Quindi c'è la funzione modal("hide"). Ma come bbox è stato impostato nel primo evento di modello e la chiusura del modale verrà eseguita nel secondo evento di modello, ho avuto problemi a chiudere la modal.

eventi

Template.main.events({ 
    'submit form': function(event, template) { 
     event.preventDefault(); 

     var bbox = mbox.dialog({ 
      title: 'title', 
      message: Template.createElement 
     }); 
    } 
}); 

Template.createElement.events({ 
    'change input': function(event, template) { 
     bbox.modal('hide'); 
    } 
}); 

UPDATE

Il problema di cui sopra funziona con una var globale. Grazie a Adam per quello.

Ma non mi piacerebbe distruggere una modale in un pacchetto di meteora, che è stato creato da un altro pacchetto . Ho provato a utilizzare una variabile globale e ho provato a utilizzare api.export(). Ma ancora non funziona. Ho anche provato a lavorare con Sessions.

pacchetto-graph/lib/client/graph.js

var bbox; 
CanvasManager = { 
    onShowAddToolTip (element) { 
     bbox = mbox.dialog({ // <-- Create Modal 
      title: "Title", 
      message: Template.search, // <-- Loading Template search with just one input field with typeahead 
     }); 
    }, 
} 

CanvasManger.create(...); 

pacchetto-graph/lib/package.js

api.export('bbox'); 

Il secondo pacchetto prevedono la typeahead-searchbox (sergeyt:typeahead). Creando il modale nel primo pacchetto, il modello verrà caricato nel modale (helloludger:mbox). Ora l'utente può cercare tramite typeahead e selezionare un oggetto. Dopo la selezione la modale dovrebbe essere distrutta da `modal ('nascondi').

pacchetto-ricerca/lib/client/events.js

Template.searchMain.onRendered(function() { 
    Meteor.typeahead.inject(); 
}); 

pacchetto-ricerca/lib/client/helper.js

Template.search.helpers({ // <-- getting the data for the input typeahead 
    searchData: function() { 
     return [ 
      { 
       name: 'cat1', 
       valueKey: 'title', 
       displayKey: 'title', 
       header: '<h3 class="category-name">Category</h3>', 
       template: 'searchResults', 
       local: function() { 
        return Collection.find().fetch(); 
       } 
      } 
     ] 
    }, 
    selected: function(event, suggestion) { // <-- by selecting an item, I can process the data and remove the modal 
      // do something 
      bbox.modal('hide'); // <!-- destroy modal 
      return; 
     } 
    } 
}); 

Answer 1

Fare bbox una variabile globale:

var bbox; 
Template.main.events({ 
    'submit form': function(event, template) { 
     event.preventDefault(); 

     bbox = mbox.dialog({ 
      title: 'title', 
      message: Template.createElement 
     }); 
    } 
}); 

Template.createElement.events({ 
    'change input': function(event, template) { 
     bbox && bbox.modal('hide'); 
    } 
}); 

Answer 2

Assicurarsi che il secondo pacchetto ha una dipendenza al primo:

api.use('first-package') 

Solo le esportazioni da dipendenze sono disponibili.

RelevantMeteordocs

Answer 3

Non fare questo - it violates software engineering principles.

Il motivo per cui hanno lottato per trovare una soluzione è un forte indizio che questo non è un buon modo per strutturare la vostra applicazione.

• Si desidera packageMBox incorporare packageTypeAhead, il che implica che packageMBox dipende packageTypeAhead.

• E si desidera che packageTypeAhead raggiunga in packageMBox e lo controlli, richiedendo (grazie a Gaelan) che packageTypeAhead dipenda da packageMBox.

Questo è accoppiamento bidirezionale, e anche se si trova un modo per farlo funzionare, che cosa ha fatto a raggiungere? Hai due pacchetti, nessuno dei quali può essere utilizzato (o anche testato correttamente) indipendentemente.

Quindi la soluzione è: Combinare i due pacchetti in un unico pacchetto.

'Package for everything' è un buon modo per strutturare la tua app, ma è importante considerare come e dove si divide la funzionalità in modo da non creare più problemi di quanti ne hai iniziati.

Answer 4

Se hai intenzione di modificare le variabili globali, puoi anche modificare il tuo mbox.

mbox.myModal = mbox.dialog({ 
    title: 'title', 
    message: Template.createElement 
}); 

e poi in pacchetto-search/lib/client/helper.js

Template.search.helpers({ 
    ... 
    selected: function(event, suggestion) { 
      mbox.myModal && mbox.myModal.modal('hide'); 
      mbox.myModal = null; 
      return; 
     } 
    } 
}); 

Idealmente, però, è necessario creare il proprio terzo modulo indipendente per comunicare tra le due pacchetti, e iniettare quello in entrambi i pacchetti. In questo modo non sono accoppiati e possono entrambi condividere lo stato.

In questo modulo condiviso, è necessario solo un setter e una funzione getter che trattiene l'istanza modale. Non ho familiarità con la meteora, quindi non sono sicuro di come lo farai, ma a giudicare da ciò che hai già scritto, dovrebbe essere possibile.

Aggiungi un commento se vuoi lavorarci sopra.