update site
This commit is contained in:
dntzhang
parent
ba90b93aa8
commit
eb699df558
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"cn.css": "static/css/cn.fb9dfd08.css",
|
||||
"cn.css.map": "static/css/cn.fb9dfd08.css.map",
|
||||
"cn.js": "static/js/cn.dd00be61.js",
|
||||
"cn.js.map": "static/js/cn.dd00be61.js.map",
|
||||
"cn.js": "static/js/cn.2e70c943.js",
|
||||
"cn.js.map": "static/js/cn.2e70c943.js.map",
|
||||
"index.css": "static/css/index.fb9dfd08.css",
|
||||
"index.css.map": "static/css/index.fb9dfd08.css.map",
|
||||
"index.js": "static/js/index.784b6904.js",
|
||||
"index.js.map": "static/js/index.784b6904.js.map",
|
||||
"index.js": "static/js/index.15a17c3c.js",
|
||||
"index.js.map": "static/js/index.15a17c3c.js.map",
|
||||
"static/js/0.ca615135.chunk.js": "static/js/0.ca615135.chunk.js",
|
||||
"static/js/0.ca615135.chunk.js.map": "static/js/0.ca615135.chunk.js.map",
|
||||
"static/js/1.401a75f3.chunk.js": "static/js/1.401a75f3.chunk.js",
|
||||
|
|
@ -21,8 +21,8 @@
|
|||
"static/js/13.b9bab8f5.chunk.js.map": "static/js/13.b9bab8f5.chunk.js.map",
|
||||
"static/js/14.a4d27e11.chunk.js": "static/js/14.a4d27e11.chunk.js",
|
||||
"static/js/14.a4d27e11.chunk.js.map": "static/js/14.a4d27e11.chunk.js.map",
|
||||
"static/js/15.874f4109.chunk.js": "static/js/15.874f4109.chunk.js",
|
||||
"static/js/15.874f4109.chunk.js.map": "static/js/15.874f4109.chunk.js.map",
|
||||
"static/js/15.027be8da.chunk.js": "static/js/15.027be8da.chunk.js",
|
||||
"static/js/15.027be8da.chunk.js.map": "static/js/15.027be8da.chunk.js.map",
|
||||
"static/js/16.a9eedaec.chunk.js": "static/js/16.a9eedaec.chunk.js",
|
||||
"static/js/16.a9eedaec.chunk.js.map": "static/js/16.a9eedaec.chunk.js.map",
|
||||
"static/js/17.512a230b.chunk.js": "static/js/17.512a230b.chunk.js",
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/cn.fb9dfd08.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/cn.dd00be61.js"></script></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/cn.fb9dfd08.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/cn.2e70c943.js"></script></body></html>
|
||||
|
|
@ -1 +1 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/index.fb9dfd08.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/index.784b6904.js"></script></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/index.fb9dfd08.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/index.15a17c3c.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([15],{51:function(n,t){n.exports="## What's Store?\n\nStore is Omi's built-in centralized data warehouse, which solves and provides the following problems and capabilities:\n\n* Component Tree Data Sharing\n* Data Change Updates Dependent Components on Demand\n\n\n\n## A piece of code is completely ready for Store\n\n```jsx\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-counter', class extends WeElement {\n static use = [\n { count: 'count' }\n ]\n\n add = () => this.store.add()\n sub = () => this.store.sub()\n\n addIfOdd = () => {\n if (this.use.count % 2 !== 0) {\n this.store.add()\n }\n }\n\n addAsync = () => {\n setTimeout(() => this.store.add(), 1000)\n }\n\n render() {\n return (\n <p>\n Clicked: {this.use.count} times\n {' '}\n <button onClick={this.add}>+</button>\n {' '}\n <button onClick={this.sub}>-</button>\n {' '}\n <button onClick={this.addIfOdd}>\n Add if odd\n </button>\n {' '}\n <button onClick={this.addAsync}>\n Add async\n </button>\n </p>\n )\n }\n})\n\nrender(<my-counter />, 'body', {\n data: {\n count: 0\n },\n sub() {\n this.data.count--\n },\n add() {\n this.data.count++\n },\n})\n```\n\n* Declare a dependent path by `static use'.\n* `store` injects all components from the root node through the third parameter of render.\n\nHere is a complicated example of `use'.\n\nData of store:\n\n```json\n{\n count: 0,\n arr: ['china', 'tencent'],\n motto: 'I love omi.',\n userInfo: {\n firstName: 'dnt',\n lastName: 'zhang',\n age: 18\n }\n}\n```\n\nStatic use:\n\n```jsx\nstatic use = [\n 'count', //Direct string, accessible through this.use[0] \n 'arr[0]', //It also supports path, which is accessible through this.use[1]\n //Support JSON\n {\n //Alias, accessible through this.use.reverseMotto\n reverseMotto: [\n 'motto', //path\n target => target.split('').reverse().join('') //computed\n ]\n },\n { name: 'arr[1]' }, //{ alias: path }\uff0caccessible through this.use.name\n {\n //alias\uff0caccessible through this.use.fullName\n fullName: [\n ['userInfo.firstName', 'userInfo.lastName'], //path array\n (firstName, lastName) => firstName + lastName //computed\n ]\n },\n]\n```\n\nLet's look at the use of JSX:\n\n```jsx\n...\n...\nrender() {\n return (\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.use[0]}</span>\n <button onClick={this.add}>+</button>\n <div>\n <span>{this.use[1]}</span>\n <button onClick={this.rename}>rename</button>\n </div>\n <div>{this.use.reverseMotto}</div><button onClick={this.changeMotto}>change motto</button>\n <div>{this.use.name}</div>\n <div>{this.use[3]}</div>\n <div>\n {this.use.fullName}\n <button onClick={this.changeFirstName}>change first name</button>\n </div>\n </div>\n )\n}\n...\n...\n```\n\nWithout alias, you can also access it directly through `this.store.data.xxx'.\n\n### Destructuring assignment\n\n```jsx\nimport { define, WeElement } from 'omi'\nimport '../my-list'\n\ndefine('my-sidebar', class extends WeElement {\n static css = require('./_index.css')\n\n static use = [\n 'menus',\n 'sideBarShow',\n 'lan'\n ]\n\n render() {\n const [menus, sideBarShow, lan] = this.use\n\n return (\n <div class={`list${sideBarShow ? ' show' : ''}`}>\n {menus[lan].map((menu, index) => (\n <my-list menu={menu} index={index} />\n ))}\n </div>\n )\n }\n})\n```\n\nHere is an example of using the ES2015+ Grammar `const [xx, xxx] = xxxx` for fast assignment.\n"}});
|
||||
//# sourceMappingURL=15.874f4109.chunk.js.map
|
||||
webpackJsonp([15],{51:function(n,t){n.exports="## What's Store?\n\nStore is Omi's built-in centralized data warehouse, which solves and provides the following problems and capabilities:\n\n* Component Tree Data Sharing\n* Data Change Updates Dependent Components on Demand\n\n\n\n## A piece of code is completely ready for Store\n\n```jsx\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-counter', class extends WeElement {\n static use = [\n { count: 'count' }\n ]\n\n add = () => this.store.add()\n sub = () => this.store.sub()\n\n addIfOdd = () => {\n if (this.use.count % 2 !== 0) {\n this.store.add()\n }\n }\n\n addAsync = () => {\n setTimeout(() => this.store.add(), 1000)\n }\n\n render() {\n return (\n <p>\n Clicked: {this.use.count} times\n {' '}\n <button onClick={this.add}>+</button>\n {' '}\n <button onClick={this.sub}>-</button>\n {' '}\n <button onClick={this.addIfOdd}>\n Add if odd\n </button>\n {' '}\n <button onClick={this.addAsync}>\n Add async\n </button>\n </p>\n )\n }\n})\n\nrender(<my-counter />, 'body', {\n data: {\n count: 0\n },\n sub() {\n this.data.count--\n },\n add() {\n this.data.count++\n },\n})\n```\n\n* Declare a dependent path by `static use'.\n* `store` injects all components from the root node through the third parameter of render.\n\nHere is a complicated example of `use'.\n\nData of store:\n\n```json\n{\n count: 0,\n arr: ['china', 'tencent'],\n motto: 'I love omi.',\n userInfo: {\n firstName: 'dnt',\n lastName: 'zhang',\n age: 18\n }\n}\n```\n\nStatic use:\n\n```jsx\nstatic use = [\n 'count', //Direct string, accessible through this.use[0] \n 'arr[0]', //It also supports path, which is accessible through this.use[1]\n //Support JSON\n {\n //Alias, accessible through this.use.reverseMotto\n reverseMotto: [\n 'motto', //path\n target => target.split('').reverse().join('') //computed\n ]\n },\n { name: 'arr[1]' }, //{ alias: path }\uff0caccessible through this.use.name\n {\n //alias\uff0caccessible through this.use.fullName\n fullName: [\n ['userInfo.firstName', 'userInfo.lastName'], //path array\n (firstName, lastName) => firstName + lastName //computed\n ]\n },\n]\n```\n\nLet's look at the use of JSX:\n\n```jsx\n...\n...\nrender() {\n return (\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.use[0]}</span>\n <button onClick={this.add}>+</button>\n <div>\n <span>{this.use[1]}</span>\n <button onClick={this.rename}>rename</button>\n </div>\n <div>{this.use.reverseMotto}</div><button onClick={this.changeMotto}>change motto</button>\n <div>{this.use.name}</div>\n <div>{this.use[3]}</div>\n <div>\n {this.use.fullName}\n <button onClick={this.changeFirstName}>change first name</button>\n </div>\n </div>\n )\n}\n...\n...\n```\n\nWithout alias, you can also access it directly through `this.store.data.xxx'.\n\n### Path hit rule\n\n| Proxy Path | path in static use | update |\n| ---------- | ---------- | -------- |\n| abc | abc | true |\n| abc[1] | abc | true |\n| abc.a | abc | true |\n| abc | abc.a | false |\n| abc | abc[1] | false |\n| abc | abc[1].c | false |\n| abc.b | abc.b | true |\n\nThe above can be updated by hitting only one condition!\n\nSummary: As long as the path of the injected component is equal to that declared in use or under one of the path sub-nodes declared in use, it will be updated!\n\n### Destructuring assignment\n\n```jsx\nimport { define, WeElement } from 'omi'\nimport '../my-list'\n\ndefine('my-sidebar', class extends WeElement {\n static css = require('./_index.css')\n\n static use = [\n 'menus',\n 'sideBarShow',\n 'lan'\n ]\n\n render() {\n const [menus, sideBarShow, lan] = this.use\n\n return (\n <div class={`list${sideBarShow ? ' show' : ''}`}>\n {menus[lan].map((menu, index) => (\n <my-list menu={menu} index={index} />\n ))}\n </div>\n )\n }\n})\n```\n\nHere is an example of using the ES2015+ Grammar `const [xx, xxx] = xxxx` for fast assignment.\n"}});
|
||||
//# sourceMappingURL=15.027be8da.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -140,6 +140,22 @@ render() {
|
|||
|
||||
Without alias, you can also access it directly through `this.store.data.xxx'.
|
||||
|
||||
### Path hit rule
|
||||
|
||||
| Proxy Path | path in static use | update |
|
||||
| ---------- | ---------- | -------- |
|
||||
| abc | abc | true |
|
||||
| abc[1] | abc | true |
|
||||
| abc.a | abc | true |
|
||||
| abc | abc.a | false |
|
||||
| abc | abc[1] | false |
|
||||
| abc | abc[1].c | false |
|
||||
| abc.b | abc.b | true |
|
||||
|
||||
The above can be updated by hitting only one condition!
|
||||
|
||||
Summary: As long as the path of the injected component is equal to that declared in use or under one of the path sub-nodes declared in use, it will be updated!
|
||||
|
||||
### Destructuring assignment
|
||||
|
||||
```jsx
|
||||
|
|
|
|||
Loading…
Reference in New Issue