DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

prepare v1.5.0

This commit is contained in:
dntzhang 2017-04-19 10:20:03 +08:00
parent 5909eec5a0
commit dfc45e8f57
27 changed files with 10844 additions and 1519 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1248
dist/omi.js vendored
View File

File diff suppressed because it is too large Load Diff

133
dist/omi.lite.js vendored
View File

@ -1,6 +1,6 @@
/*!
* Omi v1.4.1 By dntzhang
* Github: https://github.com/AlloyTeam/omi
* Omi v1.5.0 By dntzhang
* Github: https://github.com/AlloyTeam/omi
* MIT Licensed.
*/
(function webpackUniversalModuleDefinition(root, factory) {
@ -65,11 +65,11 @@ return /******/ (function(modules) { // webpackBootstrap
var _omi2 = _interopRequireDefault(_omi);
var _component = __webpack_require__(3);
var _component = __webpack_require__(4);
var _component2 = _interopRequireDefault(_component);
var _store = __webpack_require__(8);
var _store = __webpack_require__(9);
var _store2 = _interopRequireDefault(_store);
@ -137,14 +137,14 @@ return /******/ (function(modules) { // webpackBootstrap
};
}
/**
* Shim for "fixing" IE's lack of support (IE < 9) for applying slice
* on host objects like NamedNodeMap, NodeList, and HTMLCollection
* (technically, since host objects have been implementation-dependent,
* at least before ES6, IE hasn't needed to work this way).
* Also works on strings, fixes IE < 9 to allow an explicit undefined
* for the 2nd argument (as in Firefox), and prevents errors when
* called on other DOM objects.
/**
* Shim for "fixing" IE's lack of support (IE < 9) for applying slice
* on host objects like NamedNodeMap, NodeList, and HTMLCollection
* (technically, since host objects have been implementation-dependent,
* at least before ES6, IE hasn't needed to work this way).
* Also works on strings, fixes IE < 9 to allow an explicit undefined
* for the 2nd argument (as in Firefox), and prevents errors when
* called on other DOM objects.
*/
(function () {
'use strict';
@ -437,7 +437,8 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
/* 2 */,
/* 3 */
/* 3 */,
/* 4 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@ -452,19 +453,19 @@ return /******/ (function(modules) { // webpackBootstrap
var _omi2 = _interopRequireDefault(_omi);
var _style = __webpack_require__(4);
var _style = __webpack_require__(5);
var _style2 = _interopRequireDefault(_style);
var _event = __webpack_require__(5);
var _event = __webpack_require__(6);
var _event2 = _interopRequireDefault(_event);
var _morphdom = __webpack_require__(6);
var _morphdom = __webpack_require__(7);
var _morphdom2 = _interopRequireDefault(_morphdom);
var _html2json = __webpack_require__(7);
var _html2json = __webpack_require__(8);
var _html2json2 = _interopRequireDefault(_html2json);
@ -1150,7 +1151,7 @@ return /******/ (function(modules) { // webpackBootstrap
exports['default'] = Component;
/***/ },
/* 4 */
/* 5 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@ -1221,7 +1222,7 @@ return /******/ (function(modules) { // webpackBootstrap
};
/***/ },
/* 5 */
/* 6 */
/***/ function(module, exports) {
'use strict';
@ -1247,7 +1248,7 @@ return /******/ (function(modules) { // webpackBootstrap
exports['default'] = scopedEvent;
/***/ },
/* 6 */
/* 7 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;'use strict';
@ -1328,15 +1329,15 @@ return /******/ (function(modules) { // webpackBootstrap
return arr;
}
/**
* Returns true if two node's names are the same.
*
* NOTE: We don't bother checking `namespaceURI` because you will never find two HTML elements with the same
* nodeName and different namespace URIs.
*
* @param {Element} a
* @param {Element} b The target element
* @return {boolean}
/**
* Returns true if two node's names are the same.
*
* NOTE: We don't bother checking `namespaceURI` because you will never find two HTML elements with the same
* nodeName and different namespace URIs.
*
* @param {Element} a
* @param {Element} b The target element
* @return {boolean}
*/
function compareNodeNames(fromEl, toEl) {
var fromNodeName = fromEl.nodeName;
@ -1357,21 +1358,21 @@ return /******/ (function(modules) { // webpackBootstrap
}
}
/**
* Create an element, optionally with a known namespace URI.
*
* @param {string} name the element name, e.g. 'div' or 'svg'
* @param {string} [namespaceURI] the element's namespace URI, i.e. the value of
* its `xmlns` attribute or its inferred namespace.
*
* @return {Element}
/**
* Create an element, optionally with a known namespace URI.
*
* @param {string} name the element name, e.g. 'div' or 'svg'
* @param {string} [namespaceURI] the element's namespace URI, i.e. the value of
* its `xmlns` attribute or its inferred namespace.
*
* @return {Element}
*/
function createElementNS(name, namespaceURI) {
return !namespaceURI || namespaceURI === NS_XHTML ? doc.createElement(name) : doc.createElementNS(namespaceURI, name);
}
/**
* Copies the children of one DOM element to another DOM element
/**
* Copies the children of one DOM element to another DOM element
*/
function moveChildren(fromEl, toEl) {
var curChild = fromEl.firstChild;
@ -1451,18 +1452,18 @@ return /******/ (function(modules) { // webpackBootstrap
}
var specialElHandlers = {
/**
* Needed for IE. Apparently IE doesn't think that "selected" is an
* attribute when reading over the attributes using selectEl.attributes
/**
* Needed for IE. Apparently IE doesn't think that "selected" is an
* attribute when reading over the attributes using selectEl.attributes
*/
OPTION: function OPTION(fromEl, toEl) {
syncBooleanAttrProp(fromEl, toEl, 'selected');
},
/**
* The "value" attribute is special for the <input> element since it sets
* the initial value. Changing the "value" attribute without changing the
* "value" property will have no effect since it is only used to the set the
* initial value. Similar for the "checked" attribute, and "disabled".
/**
* The "value" attribute is special for the <input> element since it sets
* the initial value. Changing the "value" attribute without changing the
* "value" property will have no effect since it is only used to the set the
* initial value. Similar for the "checked" attribute, and "disabled".
*/
INPUT: function INPUT(fromEl, toEl) {
syncBooleanAttrProp(fromEl, toEl, 'checked');
@ -1590,13 +1591,13 @@ return /******/ (function(modules) { // webpackBootstrap
}
}
/**
* Removes a DOM node out of the original DOM
*
* @param {Node} node The node to remove
* @param {Node} parentNode The nodes parent
* @param {Boolean} skipKeyedNodes If true then elements with keys will be skipped and not discarded.
* @return {undefined}
/**
* Removes a DOM node out of the original DOM
*
* @param {Node} node The node to remove
* @param {Node} parentNode The nodes parent
* @param {Boolean} skipKeyedNodes If true then elements with keys will be skipped and not discarded.
* @return {undefined}
*/
function removeNode(node, parentNode, skipKeyedNodes) {
if (onBeforeNodeDiscarded(node) === false) {
@ -1975,7 +1976,7 @@ return /******/ (function(modules) { // webpackBootstrap
});
/***/ },
/* 7 */
/* 8 */
/***/ function(module, exports) {
"use strict";
@ -1983,16 +1984,16 @@ return /******/ (function(modules) { // webpackBootstrap
Object.defineProperty(exports, "__esModule", {
value: true
});
/*
* html2json for omi
* https://github.com/AlloyTeam/omi
*
* Original code by John Resig (ejohn.org)
* http://ejohn.org/blog/pure-javascript-html-parser/
* Original code by Erik Arvidsson, Mozilla Public License
* http://erik.eae.net/simplehtmlparser/simplehtmlparser.js
* Original code by Jxck
* https://github.com/Jxck/html2json
/*
* html2json for omi
* https://github.com/AlloyTeam/omi
*
* Original code by John Resig (ejohn.org)
* http://ejohn.org/blog/pure-javascript-html-parser/
* Original code by Erik Arvidsson, Mozilla Public License
* http://erik.eae.net/simplehtmlparser/simplehtmlparser.js
* Original code by Jxck
* https://github.com/Jxck/html2json
*/
// Regular Expressions for parsing tags and attributes
@ -2218,7 +2219,7 @@ return /******/ (function(modules) { // webpackBootstrap
exports["default"] = html2json;
/***/ },
/* 8 */
/* 9 */
/***/ function(module, exports) {
"use strict";

2
dist/omi.lite.min.js vendored
View File

@ -1,5 +1,5 @@
/*!
* Omi v1.4.1 By dntzhang
* Omi v1.5.0 By dntzhang
* Github: https://github.com/AlloyTeam/omi
* MIT Licensed.
*/

10
dist/omi.min.js vendored
View File

File diff suppressed because one or more lines are too long

2985
dist/omi.mustache.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

11
dist/omi.mustache.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
dist/omi.soda.min.js vendored
View File

File diff suppressed because one or more lines are too long

3042
example/nest-repeat/bundler.js Normal file
View File

File diff suppressed because it is too large Load Diff

2
example/soda/index.html → example/nest-repeat/index.html
View File

@ -5,7 +5,7 @@
<title></title>
</head>
<body>
<div id="test"></div>
<div id="container"></div>
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
<img src="../../asset/github.png" alt="" />
</a>

12
example/soda/main.js → example/nest-repeat/main.js
View File

@ -1,6 +1,5 @@
import Omi from '../../src/index.soda.js';
import Omi from '../../src/index.js';
import hello from './hello.js'
class List extends Omi.Component {
constructor(data) {
@ -8,16 +7,15 @@ class List extends Omi.Component {
}
render(){
return `<div>
<hello o-repeat="item in items" o-if="item.show" data-name="{{item.text}}"></hello>
<div o-repeat="item in items" o-if="item.show">
{{$index}}- {{item.text}}
<ul>
<li o-repeat="subItem in item.arr by $subIndex">
<div>parent index: {{$index}}</div>
<div>parent item text:{{item.text}}</div>
<div>{{$subIndex}}{{subItem}}</div>
<div>sub index: {{$subIndex}}</div>
<div>sub item :{{subItem}}</div>
</li>
</ul>
</div>
@ -27,11 +25,9 @@ class List extends Omi.Component {
}
Omi.render(new List({
show:true,
name:'Omi',
items: [
{ text: 'Omi', show: true ,arr:['a','b','c']},
{ text: 'dntzhang', show: true},
{ text: 'dntzhang', show: true, arr:['d','e']},
{ text: 'AlloyTeam'}
]
}),"body",true);

3093
example/repeat-custom-tag/bundler.js Normal file
View File

File diff suppressed because it is too large Load Diff

14
example/repeat-custom-tag/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="container"></div>
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
<img src="../../asset/github.png" alt="" />
</a>
<script src="bundler.js"></script>
</body>
</html>

15
example/repeat-custom-tag/item.js Normal file
View File

@ -0,0 +1,15 @@
import Omi from '../../src/index.js';
class Item extends Omi.Component {
constructor(data) {
super(data);
}
render(){
return `<div>Hello, {{text}}</div>`
}
}
export default Item

25
example/repeat-custom-tag/main.js Normal file
View File

@ -0,0 +1,25 @@
import Omi from '../../src/index.js';
import item from './item.js'
Omi.tag('item',item)
class List extends Omi.Component {
constructor(data) {
super(data);
}
render(){
return `<div>
<item o-repeat="item in items" o-if="item.show" data-text="{{item.text}}"></item>
</div>`
}
}
Omi.render(new List({
items: [
{ text: 'Omi', show: true },
{ text: 'dntzhang', show: true},
{ text: 'AlloyTeam'}
]
}),"body",true);

1476
dist/omi.soda.js → example/repeat/bundler.js
View File

File diff suppressed because it is too large Load Diff

14
example/repeat/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="container"></div>
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
<img src="../../asset/github.png" alt="" />
</a>
<script src="bundler.js"></script>
</body>
</html>

25
example/repeat/main.js Normal file
View File

@ -0,0 +1,25 @@
import Omi from '../../src/index.js';
class List extends Omi.Component {
constructor(data) {
super(data);
}
render(){
return `<div>
<div o-repeat="item in items" o-if="item.show">
{{$index}}- {{item.text}}
</div>
</div>`
}
}
Omi.render(new List({
items: [
{ text: 'Omi', show: true },
{ text: 'dntzhang', show: true },
{ text: 'AlloyTeam'}
]
}),"body",true);

55
example/soda/bundler.js → example/simple/bundler.js
View File

@ -48,9 +48,9 @@
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _indexSoda = __webpack_require__(1);
var _index = __webpack_require__(1);
var _indexSoda2 = _interopRequireDefault(_indexSoda);
var _index2 = _interopRequireDefault(_index);
var _hello = __webpack_require__(11);
@ -64,31 +64,28 @@
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var List = function (_Omi$Component) {
_inherits(List, _Omi$Component);
_index2['default'].tag('hello', _hello2['default']);
function List(data) {
_classCallCheck(this, List);
var App = function (_Omi$Component) {
_inherits(App, _Omi$Component);
return _possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).call(this, data));
function App() {
_classCallCheck(this, App);
return _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).apply(this, arguments));
}
_createClass(List, [{
_createClass(App, [{
key: 'render',
value: function render() {
return '<div>\n <hello o-repeat="item in items" o-if="item.show" data-name="{{item.text}}"></hello>\n <div o-repeat="item in items" o-if="item.show">\n {{$index}}- {{item.text}}\n <ul>\n <li o-repeat="subItem in item.arr by $subIndex">\n <div>parent index: {{$index}}</div>\n <div>parent item text:{{item.text}}</div>\n <div>{{$subIndex}}{{subItem}}</div>\n </li>\n </ul>\n </div>\n </div>';
return '<hello data-name="Omi"></hello>';
}
}]);
return List;
}(_indexSoda2['default'].Component);
return App;
}(_index2['default'].Component);
_indexSoda2['default'].render(new List({
show: true,
name: 'Omi',
items: [{ text: 'Omi', show: true, arr: ['a', 'b', 'c'] }, { text: 'dntzhang', show: true }, { text: 'AlloyTeam' }]
}), "body", true);
_index2['default'].render(new App(), "#container");
/***/ },
/* 1 */
@ -3057,9 +3054,9 @@
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _indexSoda = __webpack_require__(1);
var _index = __webpack_require__(1);
var _indexSoda2 = _interopRequireDefault(_indexSoda);
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@ -3072,23 +3069,31 @@
var Hello = function (_Omi$Component) {
_inherits(Hello, _Omi$Component);
function Hello(data) {
function Hello() {
_classCallCheck(this, Hello);
return _possibleConstructorReturn(this, (Hello.__proto__ || Object.getPrototypeOf(Hello)).call(this, data));
return _possibleConstructorReturn(this, (Hello.__proto__ || Object.getPrototypeOf(Hello)).apply(this, arguments));
}
_createClass(Hello, [{
key: 'style',
value: function style() {
return 'div{\n cursor: pointer;\n }';
}
}, {
key: 'clickHandler',
value: function clickHandler(evt) {
alert(evt.target.innerHTML);
}
}, {
key: 'render',
value: function render() {
return '<div>Hello, {{name}}</div>';
return '<div onclick="clickHandler">Hello, {{name}}</div>';
}
}]);
return Hello;
}(_indexSoda2['default'].Component);
_indexSoda2['default'].tag('hello', Hello);
}(_index2['default'].Component);
exports['default'] = Hello;

20
example/simple/hello.js Normal file
View File

@ -0,0 +1,20 @@
import Omi from '../../src/index.js';
class Hello extends Omi.Component {
style(){
return `div{
cursor: pointer;
}`
}
clickHandler(evt){
alert(evt.target.innerHTML)
}
render(){
return `<div onclick="clickHandler">Hello, {{name}}</div>`
}
}
export default Hello

14
example/simple/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="container"></div>
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
<img src="../../asset/github.png" alt="" />
</a>
<script src="bundler.js"></script>
</body>
</html>

13
example/simple/main.js Normal file
View File

@ -0,0 +1,13 @@
import Omi from '../../src/index.js';
import hello from './hello.js'
Omi.tag('hello', hello)
class App extends Omi.Component {
render(){
return `<hello data-name="Omi"></hello>`
}
}
Omi.render(new App(),"#container");

16
example/soda/hello.js
View File

@ -1,16 +0,0 @@
import Omi from '../../src/index.soda.js';
class Hello extends Omi.Component {
constructor(data) {
super(data);
}
render(){
return `<div>Hello, {{name}}</div>`
}
}
Omi.tag('hello', Hello)
export default Hello

8
package.json
View File

@ -1,6 +1,6 @@
{
"name": "omi",
"version": "1.4.1",
"version": "1.5.0",
"description": "Open and modern framework for building user interfaces.",
"main": "dist/omi.js",
"types": "index.d.ts",
@ -8,13 +8,15 @@
"build": "webpack -w",
"build-min": "webpack -w",
"build-server": "node asset/build_server.js",
"nest": "webpack -w",
"simple": "webpack -w",
"repeat-custom-tag": "webpack -w",
"repeat": "webpack -w",
"nest-repeat": "webpack -w",
"slot":"webpack -w",
"curd": "webpack -w",
"todomvc": "webpack -w",
"textarea": "webpack -w",
"svg": "webpack -w",
"simple": "webpack -w",
"soda": "webpack -w",
"group-data": "webpack -w",
"jsx-like-event":"webpack -w",

32
src/index.js
View File

@ -1,15 +1,17 @@
import Omi from './omi.js'
import Mustache from './mustache.js'
import Component from './component.js'
import Store from './store.js'
Omi.template = Mustache.render
Omi.Store = Store
Omi.Component = Component
if(window.Omi){
module.exports = window.Omi
}else {
window.Omi = Omi
module.exports = Omi
}
import Omi from './omi.js'
import soda from './soda.js'
import Component from './component.js'
import Store from './store.js'
soda.prefix('o')
Omi.template = soda
Omi.Store = Store
Omi.Component = Component
if(window.Omi){
module.exports = window.Omi
}else {
window.Omi = Omi
module.exports = Omi
}

32
src/index.soda.js → src/index.mustache.js
View File

@ -1,17 +1,15 @@
import Omi from './omi.js'
import soda from './soda.js'
import Component from './component.js'
import Store from './store.js'
soda.prefix('o')
Omi.template = soda
Omi.Store = Store
Omi.Component = Component
if(window.Omi){
module.exports = window.Omi
}else {
window.Omi = Omi
module.exports = Omi
}
import Omi from './omi.js'
import Mustache from './mustache.js'
import Component from './component.js'
import Store from './store.js'
Omi.template = Mustache.render
Omi.Store = Store
Omi.Component = Component
if(window.Omi){
module.exports = window.Omi
}else {
window.Omi = Omi
module.exports = Omi
}

55
tutorial/soda.md
View File

@ -1,16 +1,24 @@
## Omi的soda版本正式发布
## Omi全新版本来袭 - 指令系统
[Omi框架](https://github.com/AlloyTeam/omi)到目前为止有三种版本。
* omi.js 使用 [mustache.js](https://github.com/janl/mustache.js)为内置模版引擎
* omi.js 使用 [sodajs](https://github.com/AlloyTeam/sodajs) 为内置模板引擎
* omi.lite.js 不包含任何模板引擎
* omi.soda.js 使用 [sodajs](https://github.com/AlloyTeam/sodajs) 为内置模板引擎
* omi.mustache.js 使用 [mustache.js](https://github.com/janl/mustache.js)为内置模版引擎
[sodajs](https://github.com/AlloyTeam/sodajs)是我们团队高级工程师(dorsywang)的作品，服务员QQ群、兴趣部落等多个产品线，
以良好的兼容性、卓越的性能、简便的语法、超小的尺寸以及强大的功能而深受同事们的喜爱。下面先来看看sodajs怎么使用。
## sodajs语法
sodajs的指令默认是以`soda`开头。当然不是必须，今天更新了一版sodajs支持自定义前缀。
```
soda.prefix('o')
```
现在，下面所有的指令使用`o-`开头。
### simple
``` js
@ -18,31 +26,27 @@ var tpl = '<div>Hello, {{name}}</div>'
document.body.innerHTML = soda(tpl,{ name : 'soda' })
```
➜ [simple example](http://alloyteam.github.io/sodajs/pg/rd.html?type=simple)
### if
``` js
var tpl = '<div soda-if="show">Hello, {{name}}</div>' +
'<div soda-if="!show">I\'m hidden!</div>'
var tpl = '<div o-if="show">Hello, {{name}}</div>' +
'<div o-if="!show">I\'m hidden!</div>'
document.body.innerHTML = soda(tpl,{ name : 'soda',show: true })
```
➜ [if example](http://alloyteam.github.io/sodajs/pg/rd.html?type=if)
### repeat
> soda-repeat="item in array"
> o-repeat="item in array"
> soda-repeat="item in object"
> o-repeat="item in object"
> soda-repeat="item in array by index"
> o-repeat="item in array by index"
> soda-repeat="item in object by key"
> o-repeat="item in object by key"
> soda-repeat="(index, value) in array"
> o-repeat="(index, value) in array"
> soda-repeat="(key, value) in object"
> o-repeat="(key, value) in object"
default index or key is $index
@ -50,7 +54,7 @@ default index or key is $index
``` js
var tpl = '\
<ul>\
<li soda-repeat="item in list" soda-if="item.show">\
<li o-repeat="item in list" o-if="item.show">\
{{item.name}}\
{{$index}}\
</li>\
@ -67,8 +71,6 @@ var data = {
document.body.innerHTML = soda(tpl, data);
```
➜ [repeat example](http://alloyteam.github.io/sodajs/pg/rd.html?type=repeat)
这里 item in array by index 中的by index有什么作用呢？当然有作用！因为当两层或者多层嵌套循环的时候，通过内层循环已经无法通过{{$index}} 访问到外层循环的索引，所以可以通过 by xxx 对 index进行重命名，这样就解决了多层嵌套循环访问索引的问题。
### expression
@ -78,8 +80,6 @@ var tpl = '<div>Hello, {{count+1}}</div>'
document.body.innerHTML = soda(tpl,{ count : 1 })
```
➜ [expression example](http://alloyteam.github.io/sodajs/pg/rd.html?type=expression)
### filter
> soda.filter(String filterName, Function func(input, args...))
@ -93,7 +93,7 @@ soda.filter('shortTitle', function(input, length){
});
var tpl = '\
<ul soda-repeat="item in list">\
<ul o-repeat="item in list">\
<li class="title">\
{{item.title|shortTitle:10}}\
</li>\
@ -106,19 +106,14 @@ document.body.innerHTML = soda(tpl,{ list : [
] })
```
➜ [filter example](http://alloyteam.github.io/sodajs/pg/rd.html?type=filter)
### html
```js
var tpl = '<div soda-html="html"></div>'
var tpl = '<div o-html="html"></div>'
document.body.innerHTML = soda(tpl,{ html : '<span style="color:red;">test soda-html</span>' })
```
➜ [bind-html example](http://alloyteam.github.io/sodajs/pg/rd.html?type=bind-html)
## 使用omi.soda.js
## 新版omi.js
```js
@ -129,7 +124,7 @@ class List extends Omi.Component {
render(){
return `<ul>
<li soda-repeat="item in items" soda-if="item.show">
<li o-repeat="item in items" o-if="item.show">
{{$index}}- {{item.text}}
</li>
</ul>`
@ -145,6 +140,8 @@ Omi.render(new List({
}),"body",true);
```
➜ [bind-html example](http://alloyteam.github.io/sodajs/pg/rd.html?type=bind-html)
## Omi相关
* Omi官网[omijs.org](http://www.omijs.org)

4
webpack.config.js
View File

@ -46,7 +46,7 @@ if(ENV === 'build'||ENV === 'build-min'){
entry: {
omi: './src/index.js',
'omi.lite': './src/index.lite.js',
'omi.soda': './src/index.soda.js'
'omi.mustache': './src/index.mustache.js'
},
output: {
// path: __dirname,
@ -89,7 +89,7 @@ if(ENV === 'build'||ENV === 'build-min'){
config.entry = {
'omi.min': './src/index.js',
'omi.lite.min': './src/index.lite.js',
'omi.soda.min': './src/index.soda.js'
'omi.mustache.min': './src/index.mustache.js'
};
}
}else if(ENV==='todomvc'){