फॉर्म एचटीएमएल और सबमिट घटना "रेंडरर" का हिस्सा है। सबमिट किया गया डेटा मुख्य प्रक्रिया में उपलब्ध होना चाहिए। फॉर्म सबमिट करने और main.js में उस डेटा को सुलभ बनाने का उचित तरीका क्या है?इलेक्ट्रॉन में रूपों को संभालने का सही तरीका क्या है?
क्या मुझे मुख्य "जेएस से किसी फ़ंक्शन में डेटा पास करने के लिए" दूरस्थ "मॉड्यूल का उपयोग करना चाहिए या क्या कोई बेहतर तरीका है?
हम खिड़की में फॉर्म डेटा को संसाधित करने के लिए एक सेवा (कोणीय) का उपयोग करते हैं। फिर आवश्यक होने पर remote को सूचित करें।
अपने renderer आप में ipc लिए डेटा भेज सकते हैं, तो अपने main.js आप इस घटना को पारित कर दिया और प्रपत्र डेटा को पकड़ने:
// renderer.js
let ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.send('submitForm', formData);
// main.js
ipcMain.on('submitForm', function(event, data) {
// Access form data here
});
आप संदेशों को वापस करने के लिए भेज सकते हैं main.js से renderer।
या तो सिंक:
// main.js
ipcMain.on('submitForm', function(event, data) {
// Access form data here
event.returnValue = {"any": "value"};
});
या async:
// main.js
ipcMain.on('submitForm', function(event, data) {
// Access form data here
event.sender.send('formSubmissionResults', results);
});
// renderer.js
ipcRenderer.on('formSubmissionResults', function(event, args) {
let results = args.body;
});
ऐसा करने के तरीके पर कई रूप होते हैं, लेकिन सभी IPC के माध्यम से कर रहे हैं।
आईपीसी (इंटर प्रोसेस संचार) मुख्य प्रक्रिया में रेंडर प्रक्रिया से डेटा प्राप्त करने का एकमात्र तरीका है, और घटना संचालित है। जिस तरह से यह काम करता है वह यह है कि आप कस्टम परिभाषित घटनाओं का उपयोग कर सकते हैं, जो प्रक्रिया उस घटना के दौरान सुनती है और कुछ देता है।
@ एडम एरी द्वारा वर्णित उदाहरण प्रलेखन में ipcMain example पर एक भिन्नता है, लेकिन यह विधि एक आकार सभी फिट बैठता नहीं है।
यह कहने का कारण यह है कि यदि आप मेन्यू के माध्यम से ईवेंट (जो आम तौर पर मुख्य प्रक्रिया पर चलता है), या वाउ या कोणीय जैसे फ्रंट एंड फ्रेमवर्क के माध्यम से घटकों के माध्यम से ईवेंट भेजने की कोशिश कर रहे हैं तो यह मामला जल्दी जटिल हो सकता है।
मैं कुछ उदाहरण दे देंगे:
अपनी बात करने के लिए के साथ रिमोट का उपयोग करना, हाँ आप इलेक्ट्रॉन remote उपयोग कर सकते हैं, लेकिन रूपों के प्रयोजनों के लिए यह दृष्टिकोण अनुशंसित नहीं है । , इसके तुल्यकालिक प्रकृति के कारण डॉ -यह प्रक्रिया गतिरोध पैदा कर सकता है घटना वस्तु पैदा कर सकता है: प्रलेखन के आधार पर, दूरस्थ की बात
रेंडरर प्रक्रिया
tl से मुख्य प्रक्रिया मॉड्यूल का उपयोग करने के लिए है रिसाव (कचरा संग्रह के कारण), और कॉलबैक के साथ अप्रत्याशित परिणाम की ओर जाता है।
प्रलेखन से आगे की व्याख्या हो सकती है लेकिन आखिरकार यह dialog और menu जैसे रेंडर प्रक्रिया में आइटमों का उपयोग करने के लिए सेट है।
index.js (मुख्य प्रक्रिया)
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require ('path');
const fs = require('fs');
const os = require('os');
let window;
function createWindow(){
window = new BrowserWindow({
show: false
});
window.loadURL(`file://${__dirname}/index.html`);
window.once('ready-to-show', function(){
window.show();
});
window.webContents.openDevTools();
let contents = window.webContents;
window.on('closed', function() {
window = null;
});
}
exports.handleForm = function handleForm(targetWindow, firstname) {
console.log("this is the firstname from the form ->", firstname)
targetWindow.webContents.send('form-received', "we got it");
};
app.on('ready', function(){
createWindow();
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron App</title>
</head>
<body>
<form action="#" id="ipcForm2">
First name:<br>
<input type="text" name="firstname" id="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname" id="lastname" value="Smith">
<br><br>
<input id="submit" type="submit" value="submit">
</form>
<p id="response"></p>
<script src='renderFile.js'></script>
</body>
</html>
renderFile.js (प्रक्रिया प्रस्तुत)
const { remote, ipcRenderer } = require('electron');
const { handleForm} = remote.require('./index');
const currentWindow = remote.getCurrentWindow();
const submitFormButton = document.querySelector("#ipcForm2");
const responseParagraph = document.getElementById('response')
submitFormButton.addEventListener("submit", function(event){
event.preventDefault(); // stop the form from submitting
let firstname = document.getElementById("firstname").value;
handleForm(currentWindow, firstname)
});
ipcRenderer.on('form-received', function(event, args){
responseParagraph.innerHTML = args
/*
you could choose to submit the form here after the main process completes
and use this as a processing step
*/
});
पारंपरिक भारतीय दंड संहिता
index.js (मुख्य प्रक्रिया)
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require ('path');
const fs = require('fs');
const os = require('os');
let window;
function createWindow(){
window = new BrowserWindow({
show: false
});
window.loadURL(`file://${__dirname}/index.html`);
window.once('ready-to-show', function(){
window.show();
});
window.webContents.openDevTools();
let contents = window.webContents;
window.on('closed', function() {
window = null;
});
}
ipcMain.on('form-submission', function (event, firstname) {
console.log("this is the firstname from the form ->", firstname)
});
app.on('ready', function(){
createWindow();
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron App</title>
</head>
<body>
<form name="ipcForm" onSubmit="JavaScript:sendForm(event)">
First name:<br>
<input type="text" name="firstname" id="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname" id="lastname" value="Smith">
<br><br>
<input type="submit" value="Submit">
</form>
<script src='renderFile.js'></script>
</body>
</html>
renderFile.js (प्रस्तुत प्रक्रिया)
const ipcRenderer = require('electron').ipcRenderer;
function sendForm(event) {
event.preventDefault() // stop the form from submitting
let firstname = document.getElementById("firstname").value;
ipcRenderer.send('form-submission', firstname)
}
का उपयोग WebContents
एक संभव तीसरा विकल्पहै 0 मुख्य प्रक्रिया से रेंडरर प्रक्रिया तक पहुंचने के लिए। remote प्रलेखन अनुभाग से यह स्पष्टीकरण।
सारांश
जैसा कि आप देख सकते हैं, वहाँ कैसे इलेक्ट्रॉन के साथ रूपों को संभालने के लिए पर कुछ विकल्प हैं। जब तक आप आईपीसी का उपयोग करते हैं, आपको ठीक होना चाहिए; यह सिर्फ आप इसका उपयोग कैसे करते हैं जो आपको परेशानी में डाल सकता है। मैंने फॉर्मों को संभालने के लिए सादे जावास्क्रिप्ट विकल्प दिखाए हैं, लेकिन ऐसा करने के अनगिनत तरीके हैं। जब आप मिश्रण में फ्रंट एंड फ्रेमवर्क लाते हैं, तो यह और भी दिलचस्प हो जाता है।
मैं व्यक्तिगत रूप से पारंपरिक आईपीसी दृष्टिकोण का उपयोग कर सकता हूं जब मैं कर सकता हूं।
आशा है कि चीजें आपके लिए साफ़ कर दें!
मैं अभी भी स्पष्ट नहीं हूं कि पारंपरिक आईपीसी तरीके आपके अनुसार क्यों अनुशंसित नहीं है। क्या होगा यदि मैं कोणीय जैसे किसी भी ढांचे का उपयोग नहीं करता? – JerryGoyal
यदि आप ऊपर दिए गए सारांश को पढ़ते हैं, तो यह आपके लिए अधिक स्पष्ट होगा। मैं पारंपरिक आईपीसी के बाहर कुछ भी सिफारिश नहीं करता हूं (आपको यह जवाब एडम के ऊपर से उलझन में होना चाहिए)। मैं आपको एक उदाहरण देता हूं कि बिना ढांचे के इसे कैसे किया जाए –
क्या आप सामने वाले ढांचे के दृष्टिकोण, या पूरी तरह से इलेक्ट्रॉन से पूछ रहे हैं? –