A JavaScript framework for building UI on the web.
<script src="Jin.js" type="text/javascript"></script>You can declare some components in your page via <script tyle="text/component"></script> tag or import components-declared file by using <script tyle="text/component" src></script> tag in the <head>...</head> of your page.
Jin.js will handle these components, all you need to do is deploy these components in your page and customize them.
......
A components-declared file (usually suffixed .js) contains several declarations as follows:
[!#JinStart name="standardCard"]
<div style="background: white;
box-shadow: 0 1px 2px grey;
border-radius: 4px;
margin: 20px auto;
padding: 20px;
max-width: 300px;">
<h1 style="font-size: 18px;
color: #0e0e0e;
margin: 0;">
{{card_title}}
</h1>
<p style="color: #808080;
fonnt-size: 16px;
margin: 10px 0 0 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: ellipsis;">
{{card_content}}
</p>
</div>
[!#JinEnd]Apparently, the [!#JinStart] and [!#JinEnd] tag is for packing different components' HTML code, and a name parameter is nessary.
You have 3 ways to declare your components.
Adding <script tyle="text/component" src></script> tag between your page's <head> and </head>, Jin.js will fetch the target file when DOM is rendered.
eg:
<script src="components/component1.js" tyle="text/components"></script>Drectly attach components declaration between rag <script tyle="text/component" src> and </script>
eg:
<script tyle="text/component">
[!#JinStart name="components1"]
<div>{{content}}</div>
[!#JinEnd]
</script>eg:
const component_1 = new Jin('example-components/default2.html');
component_1.ready( () => {
alert('component_1 is ready');
}); new Jin('example-components/default2.html').ready( () => {
alert('component_1 is ready');
});In method 1 and 3, there might be cross-origin protection which will restrict Jin.js to fetch the component-declared file. To avoid this situation, please refer to ACCESS-CONTROL-ALLOW-ORIGIN or store the file in the same origin as the page. (You don't need to worry if you are using some hybrid platform such as phonegap, ionic etc)
Jin.onReady(function)function will be called when all component-declared file imported by <script> tag are ready.
WRONG:
<script src="component.js" tyle="text/component"></script>
<script>
card = Jin.append('body', 'card', {
card_title: 'Hello World!'
});
// component1 is declared in component.js
</script>CORRECT:
<script src="component.js" tyle="text/component"></script>
<script>
Jin.onReady( () => {
card = Jin.append('body', 'card', {
card_title: 'Hello World!'
});
});
// component1 is declared in component.js
</script>[Jin Object].ready(function)function will be called when the component-declared file imported dynamicly is ready.
WRONG:
new Jin('component.js');
card = Jin.append('body', 'card', {
card_title: 'Hello World!'
});
// component1 is declared in component.jsCORRECT:
<script>
new Jin('component.js').ready( () => {
card = Jin.append('body', 'card', {
card_title: 'Hello World!'
});
});
// component1 is declared in component.js
</script>Jin.append(parent, component, data)After you initialize a component (for example A) in your page, you can change its data (such as A.title = 'Hello Beijing') directly, and the component in your page will updata automaticly.
eg:
new Jin('component.js').ready( () => {
card = Jin.append('body', 'card', {
card_title: 'Hello World!'
});
card.card_title = 'Hello Beijing!';
});......