Come faccio a iniettare un componente personalizzato da js in nativescript?

Question

Supponiamo di creare un piccolo componente che accetta un input e imposta un'etichetta per mostrarlo.

app/components/TestComponent/testComponent.xml:

<Label id="someLabel" loaded="onLoad"/> 

app/componenti/TestComponent/testComponent.js:

exports.onLoad = args => { 
    const obj = args.object; 

    const label = obj.getViewById('someLabel'); 
    label.text = obj.someString || 'no string given'; 
}; 

Ora posso usare questo componente in qualsiasi delle mie pagine

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
     xmlns:testComponent="components/testComponent"> 
    <StackLayout> 
     <testComponent:testComponent someString="hello {N}"/> 
    </StackLayout> 
</Page> 

Questo sembra essere il modo ufficiale per farlo e funziona. Ma c'è un modo per iniettare questo componente nella pagina usando solo javascript?

Answer 1

Sì, la dichiarativa interfaccia utente (vale a dire xml) è in realtà un sistema costruttivo che analizza il codice XML e genera il JS in modo da non dover.

Quindi, se si voleva fare manualmente questo si dovrebbe lasciare il vostro codice del componente da solo e si dovrebbe modificare il codice schermata principale per essere come questo:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoad"> 
    <StackLayout id='sl'> 

    </StackLayout> 
</Page> 

La prima cosa che si nota è che abbiamo dato la Pagina un evento caricato, devi avere un posto dove eseguire effettivamente il tuo codice per collegare il tuo componente all'albero visivo. La seconda cosa che abbiamo fatto è stata aggiungere a StackLayout un id; questo tecnicamente non è realmente necessario: puoi navigare nell'albero NS e trovare il StackLayout corretto; ma per semplicità l'aggiunta di un ID lo rende molto più semplice.

---

Quindi il codice JS nella tua pagina potrebbe essere:

var builder = require('ui/builder'); 
var fs = require('file-system'); 

exports.onLoad = function(args) { 
    // Get our current Page that is being loaded 
    var page = args.object; 

    // Find our StackLayout 
    var stackLayout = page.getViewById('sl'); 

    // Load our JS for the component 
    var path = fs.knownFolders.currentApp().path; 
    var componentJS = require(path + '/components/testComponent/testComponent.js'); 

    // Actually have the builder build the Component using the XML & JS. 
    var component = builder.load(path + '/components/testComponent/testComponent.xml', componentJS); 

    // And add our component to the visual tree 
    stackLayout.addChild(component); 
}; 

credo che perché si sta aggiungendo il bambino in caso caricato che la pagina caricata evento nel componente figlio saranno corse, ma non mi stringere a quello. Se non lo è, puoi eseguirlo manualmente nello stesso momento in cui lo aggiungi ...

Answer 2

dove filepath è uno script - o anche una classe la funzione di callback può creare un'istanza di. Questo è come se fosse caricato al caricamento della pagina e mostrato nella maggior parte delle console degli strumenti per sviluppatori.

 var uuid='xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { 
      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); 
      return v.toString(16); 
     }); 
      var url = filepath + "?" + uuid;//prevent caching - does not work with ajax setup 
      try { 
        $.getScript(url, "callbackfunctionname('" + filepath + "')");//getScript callback seems broken so use own 
      } 
      catch (e) { 
        //error handle 
      }