मैं नेटस्क्रिप्ट में जेएस से एक कस्टम घटक कैसे इंजेक्ट कर सकता हूं?

Question

मान लीजिए कि मैं एक छोटा घटक बनाता हूं जो इनपुट लेता है और इसे दिखाने के लिए लेबल सेट करता है।

एप्लिकेशन/घटकों/testComponent/testComponent.xml:

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

एप्लिकेशन/घटकों/testComponent/testComponent.js:

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

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

अब मैं किसी में इस घटक का उपयोग कर सकते मेरे पृष्ठों के

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

ऐसा करने का आधिकारिक तरीका प्रतीत होता है और यह काम करता है। लेकिन क्या जावास्क्रिप्ट का उपयोग कर पेज में इस घटक को इंजेक्ट करने का कोई तरीका है?

Answer 1

हाँ, घोषणात्मक यूआई (अर्थात xml) वास्तव में एक इमारत प्रणाली है कि xml पार्स करके जे एस उत्पन्न करता है, ताकि आप की जरूरत नहीं है है।

तो अगर आप मैन्युअल रूप से यह करना चाहता था आप अपने घटक कोड अकेले छोड़ना होगा और आप इस तरह करने के लिए अपने मुख्य स्क्रीन कोड बदल जाएगा:

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

    </StackLayout> 
</Page> 

पहली बात तो आप देखेंगे कि हम पृष्ठ दिया है एक लोडेड इवेंट, आपको अपने घटक को दृश्य पेड़ में संलग्न करने के लिए वास्तव में अपना कोड चलाने के लिए कहीं होना चाहिए। दूसरी चीज जो हमने किया था वह एक आईडी को स्टैकलेआउट में जोड़ दिया गया था; यह तकनीकी रूप से वास्तव में आवश्यक नहीं है - आप एनएस पेड़ पर नेविगेट कर सकते हैं और उचित स्टैकलाउट ढूंढ सकते हैं; लेकिन एक आईडी जोड़ने की सादगी के लिए यह बहुत आसान बनाता है।

---

तो अपने पेज में जे एस कोड होगा:

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); 
}; 

मुझे विश्वास है कि क्योंकि आप भरी हुई घटना है कि अपने पृष्ठ बच्चे घटक में लोड घटना में बाल जोड़ रहे हैं भाग गया हो जाएगा, लेकिन मुझे उसको पकड़ो मत। यदि ऐसा नहीं है तो आप इसे मैन्युअल रूप से उसी समय चला सकते हैं जब आप इसे जोड़ रहे हैं ...

Answer 2

जहां फ़ाइलपैथ एक स्क्रिप्ट है - या यहां तक ​​कि एक क्लास कॉलबैक फ़ंक्शन एक उदाहरण बना सकता है। ऐसा लगता है कि यह पृष्ठ लोड पर लोड होता है और अधिकांश डेवलपर टूल कंसोल में दिखाता है।

 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 
      }