The motive is that I don't want to register all my components when the website is first visited by the browser. I want to be able to register components when a code needs it, and I don't want the JS file of the component to be loaded when the web page loads the very first time. Via Ajax, I want to load JS files containing component registration code.
Please, is this possible in Knockout?
If you want to load components in a different way than provided by Knockout's default loader (which uses ko.components.register), you should create a custom loader (docs). It seems that in your case, you'll just want to implement the getConfig method to return the configuration for a component.
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)
How to load a Child Component in UI5 parent app?.
I am trying to implement a Fiori Launchpad which can load other apps as Child Components.
So far I have been referring to https://stackoverflow.com/a/46358895/5846045
But implementing this requires that the child components be explicity defined in the manifest.
Thanks!
To embed one component inside an other component, you need to use the ComponentContainer - you can use it with URL and other properties, if your app doesn't know anything about the child "a priori". If, for example, your "parent" app gets the info about the child from a data service at runtime.
https://sapui5.hana.ondemand.com/#/api/sap.ui.core.ComponentContainer
You can use ComponentContainer in any way you can use other controls. you can use it inside XML views or instantiate it inside the controller and then add it to content of the page (just an example)
PS: just make sure the URL of child component is from same host. Or, if it is from different host, that it allows being retrieved using ajax requests (cross-origin-policy and stuff)
Update 2021-01-04:
here is a quick-and-dirty example in JS Fiddle:
https://jsfiddle.net/iPirat/t30sr8zw/
I embedded the Button-Sample-Component from sapui5.hana.ondemand.com here.
due to CORS policy, it will only run if you disable web security in your browser example how to do so in chrome
So, I'm using jsfiddle to follow THIS
{{respondedText}}
<div>{{respondedText}}</div>
However, say I want to read in HTML content from a file or site and then load it into that div; instead of displaying "Event Received: Event 2".
This is ultimately a building block for me in what I'm trying to use it for. I'm hoping, by successfully getting this example to work, that I can build a webapp that has buttons that, onpress, will load html from another local file on my server without reloading the entire page.
To fill an element with active HTML you have to use the v-html directive
<div v-html="respondedTest"></div>
This will allow any valid HTML but you have to note that you can't load Vue components asynchronously this way; It's only for static HTML.
Here is your JSFiddle Updated to send some HTML with the click events.
EDIT:
Looking into the spirit of your question you might want to look at vue-router It's a pretty good system to allow you to have a single page app with a routing system similar to a standard page routing system. It also allows you to mount Vue components in your pages instead of static HTML.
I am fairly new to Backbone JS and still figuring out its nuances.
I have created a router class in main.js which is included in index.html. Also, I have created an object of that router class associated to same html page.
Now, if I redirect to next html page all the created objects get lost. Even if I associate it to window object, it also get lost on a page redirect.
So, my question is how do I reuse my router object on next html page without storing it in sessionStorage or localStorage?
Should I always include the router js file on each html page and create a new object every time? Is there any other way to achieve what I am trying to do? Please enlighten me.
Backbone.js is primarily designed to create SPAs (single Page Applications) especially the routing which is based on the hash change events by default.
For some reason if you must have actual redirection between HTML pages, then considered each as separate applications, i.e both should load the libraries, setup their own backbone components etc. Data can be shared between them using client side solutions like localStorage or REST API.
I would like to add a Javascript function to all pages within the store that installs my module.
I read up on hooks, and it seems that there's no single "display" hook that I can count on being called for every single page in the store - different pages have different hooks. E.g. I need to use the displayHeader hook for "Home page and general site pages" but this doesn't work for product pages.
Is there a way to do this with a single hook, not a list of hooks each for a specific page category?
Note that I don't want to use a theme for this, because my module is meant to be an add-on to the store, not an overarching design template.
Edit:
I was wrong saying that displayHeader hook doesn't work for product pages. Indeed, as the answer says, that's the one that I need to use.
you still can use this call
$this->context->controller->addJS($this->_path.'your.js');
in module hookDisplayHeader() method, it will register your js file in js files list that will appear in e.g. header.tpl loop by $js_files
P.S.
also do not forget about mobile with somethign like:
public function hookDisplayMobileHeader()
{
return $this->hookHeader();
}
so module should be registered in 2 hooks Header and mobileHeader to appear on all devices.