I was trying to implement this widget to my Angular app. For the second part I was able to create a custom js file in my assets folder, create a .d.ts file for it and successfully imported the function in my component.
But for the first part:
<script async src="https://telegram.org/js/telegram-widget.js?5" data-telegram-login="samplebot" data-size="large" data-onauth="onTelegramAuth(user)" data-request-access="write"></script>
If I do it with plain HTML and js, it will fetch from the website and generate a login button. Yet I tried simply pasting it into my component's HTML, it does not get rendered. As it is not a function nor a variable, I am not sure how can I place it into a specific div in the component.
Please help.
Related
I am learning React.js, and I have noticed that each React file appears to be just a mix of JavaScript and HTML. But I enjoy having distinct files for my HTML and JS. So, I am wondering if I can have these two independent files but also include a link (or something) in either the HTML or JS file, so that they may communicate with one another.
Thank you.
React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props.
In other words, it was more simple than we separate html and render it on React, as a component.
If we still want to access html page via any page that created with react, we can did it via a href.
For any other way like import it (maybe), i think it was too complicated because of some reason.
Hope you will more understand about react with this react docs link
React is used to build single-page applications which is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run . this single HTML page is index.html located in the public folder (if you're using create-react-app)
I am trying to work an admin theme into an ember project. There is a custom.js file that has a lot of the javascript for the sidebar, header stuff etc. I have it in the vendor folder vendor/custom.js. I am including it in ember-cli-build as app.import('vendor/custom.js'); When I look in chrome at the vendor.js file I see the contents listed in it, but the javascript on the page does not work.
If I take some of the sections out of the custom.js and put them in the hbs file within tags the do run and work. I'm wondering why just including importing the file doesn't work.
Any thoughts on what could be wrong?
Here is a link to the custom.js file Custom.js Gist
You are trying to include customjs from the admin theme into your app.
Instead of including the custom.js directly, create custom components for each admin-theme component.
In your component you can register you click-event handler and you jquery custom code. There is a old blog post from a core team member acout this.
http://www.programwitherik.com/how-to-initialize-a-jquery-component-with-ember-js/
But i think you need some basic knowledge about how ember is rendering and what a component is compared to a controller + template. You also need to understand what the admintheme js is trying to achieve.
i'am creating spa application using vuejs and i find out that i have 3 option in loading my javascript library like bootstrap.js or jquery.js and other javascript library:
1.
first is by include all javascript library that i will use in my application in index.html where my vuejs application will live but i find that there is some javascript library that not working to well
ex: there is some javascript library that calculate page height by selecting some div with specific id="page-container", but that div not loaded when page is rendered from server, so at that moment the javascript will throw error since id="page-container" not exist yet.
2.
second is by adding it like this to all my javascript library js
// before you use your files in some components,you should package them
// your local files
export default { //export your file
your_function(){ // defined your function
...
}
}
// now your can use it
// your component file
<script>
import local_file from 'your_file_relative_path'
//now you can use it in the hook function
created(){ //or other hook function
local_file.your_function() //call your function
}
</script>
but that mean i need to change every javascript library that i use...
3.
third is by adding it using npm, and just in the vue component import it, it works okay and feels more natural but not all my javascript library are in npm, some of them is admin template related that i bought from themeforest and will never be in npm.
so which one is a better way or maybe there is much more better way that those 3 option that i find out? its hard to find any tutorial or discussion that mention adding other javascript library to spa vuejs most of them just put a bootstrap into index.html and done.
Well, If your library exist in NPM, then this is the best option, because then you have this option to import only the part of the script that you need for certain components, for example, fontawesome library, you can import only the icons that you need instead of import all of them!
but if your script is not in NPM, the best option is to run your script in beforeMount or beforeCreate of the component that the script needed to run.
the third way which is add the link reference on html is not really suggested, since it will be global and will reduce the performance.
I have two Nativescript XML view files, one named test.xml and another named test-rtl.xml. I would like these views to share the same code behind file, for example test.js. Is this possible some how? I have heard in dev channels of the Page class containing a codeFile property but have not been able to find this property any where.
The answer by #dashman is the option you have.
Each page will have it's own page files(page.js, page.xml, page-view-model.js) What you can do is have both pages share the same model.js file. Create a shared folder and place the file in it. Just require it on the page you need it and bind it to the context and you are good to go.
You can find and example here: https://firebase.googleblog.com/2016/01/getting-started-with-nativescript-and_53.html
The user-view-model.js was used by both the login page and register page.
Each file will have it's own page file...but what you can do is have both pages connect to the same context file. Then you can build the bulk of the page logic in that file. From the xml file, you can callback directly into the model file (e.g. tap="{{ tapEvent }}").
Reminder I am new to angular ways.. I would like to use an external model like bindeonce in my project but it the readme says "Include the bindonce.js script provided by this component into your app." Does it mean I should add the file to the folder or just add the script using the html tags and call the min.
Thanks