From 45876de7bf0b2bef42037fec9da335f8224738a3 Mon Sep 17 00:00:00 2001 From: Santiago Castro Date: Sun, 16 Apr 2017 20:27:46 -0300 Subject: [PATCH] Fix broken Markdown headings --- README.md | 20 +- tutorials/lesson01.md | 4 +- tutorials/lesson02.md | 4 +- tutorials/lesson03.md | 2 +- tutorials/lesson05.md | 4 +- tutorials/lesson06.md | 4 +- tutorials/lesson07.md | 474 ++++++++++++++++++------------------ tutorials/lesson08.md | 210 ++++++++-------- tutorials/lesson09.md | 550 +++++++++++++++++++++--------------------- tutorials/lesson10.md | 4 +- tutorials/lesson12.md | 4 +- tutorials/lesson15.md | 8 +- 12 files changed, 644 insertions(+), 644 deletions(-) diff --git a/README.md b/README.md index ae9529d78..6c258614e 100644 --- a/README.md +++ b/README.md @@ -31,35 +31,35 @@ es6调用方式 import * as avalon from 'avalon2' ``` -###[English tutorials](https://github.com/RubyLouvre/avalon/tree/master/tutorials) +### [English tutorials](https://github.com/RubyLouvre/avalon/tree/master/tutorials) -###[avalon cookbook](https://github.com/RubyLouvre/avalon/blob/2.1.8/avalon%20cookbook.pdf) +### [avalon cookbook](https://github.com/RubyLouvre/avalon/blob/2.1.8/avalon%20cookbook.pdf) 这是基于官网制成的电子书,方便大家离线阅览 -###[avalon2官网](http://avalonjs.coding.me/) +### [avalon2官网](http://avalonjs.coding.me/) 这是基于gitbook制作的,对移动端支持很好,大家上班或睡觉时,可以过目一下. -###[avalon2+webpack2手脚架](https://github.com/sayll/avalon-webpack-start) +### [avalon2+webpack2手脚架](https://github.com/sayll/avalon-webpack-start) -###[QuickStart](https://github.com/crazyliuzc/webpack-avalon2-SPA-seed.git) +### [QuickStart](https://github.com/crazyliuzc/webpack-avalon2-SPA-seed.git) 大家期望已久的avalon2+mmRouter+各种组件的综合示例,不断完善中 -###[UI库1](http://weeksun23.github.io/AvalonBootstrap/index.html#overview) +### [UI库1](http://weeksun23.github.io/AvalonBootstrap/index.html#overview) -###[UI库2](https://github.com/aLoNeIT/flyUI) +### [UI库2](https://github.com/aLoNeIT/flyUI) CDN: `https://unpkg.com/avalon2@2.2.4/dist/avalon.js` 用法见[https://unpkg.com/#/](https://unpkg.com/#/) -###谁在用avalon +### 谁在用avalon `欢迎大家提交logo与官网链接` -###超高性能 +### 超高性能 @@ -75,7 +75,7 @@ CDN: `https://unpkg.com/avalon2@2.2.4/dist/avalon.js` thanks http://charts.udpwork.com/ -###支持后端渲染 +### 支持后端渲染 avalon2.1.5起支持后端渲染,详见[这里](https://github.com/RubyLouvre/avalon-server-render-example) diff --git a/tutorials/lesson01.md b/tutorials/lesson01.md index 195c4a45d..2743030ab 100644 --- a/tutorials/lesson01.md +++ b/tutorials/lesson01.md @@ -1,5 +1,5 @@ -#预览 -##overview +# 预览 +## overview avalon是一个来自中国的MVVM框架，以良好的浏览器兼容性著称，体积少，性能卓越，简单易用，支持后端渲染，能帮大家快速搞定高度交互的页面。 diff --git a/tutorials/lesson02.md b/tutorials/lesson02.md index ccf212e7b..007603508 100644 --- a/tutorials/lesson02.md +++ b/tutorials/lesson02.md @@ -1,5 +1,5 @@ -#将内容输出到页面 -##Output the content to the page +# 将内容输出到页面 +## Output the content to the page 与后端模板一样,avalon能将动态的内容放到它们该呆的地方.并且提供多种便捷的方式. 第一种就是双花括号`{{}}`,第二种是`ms-text`属性.如果要输出大段HTML内容,还可以用ms-html diff --git a/tutorials/lesson03.md b/tutorials/lesson03.md index b9621e5ec..6cd352d1c 100644 --- a/tutorials/lesson03.md +++ b/tutorials/lesson03.md @@ -1,4 +1,4 @@ -#VM +# VM 这一节我们介绍avalon的VM。VM即ViewModel，我们所有业务代码都围绕它进行编写，就像后端，所有代码都是以类的形式来编写一样。 diff --git a/tutorials/lesson05.md b/tutorials/lesson05.md index e6ae24fab..0f365bffb 100644 --- a/tutorials/lesson05.md +++ b/tutorials/lesson05.md @@ -1,5 +1,5 @@ -#属性操作 -#attributes manipulating +# 属性操作 +# attributes manipulating avalon2与avalon1的属性操作虽然都是使用ms-attr，但用法完全不一样。 avalon2 and avalon1 use `ms-attr` to manipulate attributes,but way of useing is exactly the different. avalon1是这样操作属性的 diff --git a/tutorials/lesson06.md b/tutorials/lesson06.md index f5f54534b..ffb3a2d10 100644 --- a/tutorials/lesson06.md +++ b/tutorials/lesson06.md @@ -1,5 +1,5 @@ -#006样式操作 -#006STYLE +# 006样式操作 +# 006STYLE avalon2的ms-css的变革思路与ms-attr一样，将多个操作合并成到一个对象里面处理，因此没有ms-css-name="value"，只有ms-css="Object"或ms-css="Array". avalon2 redesigned `ms-css` in a same way as `ms-attr`,gather all your css values into one single object,so there is `ms-css-name="value"` no more,only `ms-css=Object"` or `ms-css=Array` will work properly. diff --git a/tutorials/lesson07.md b/tutorials/lesson07.md index 06e2b606e..8b23a36e7 100644 --- a/tutorials/lesson07.md +++ b/tutorials/lesson07.md @@ -1,238 +1,238 @@ -###07 类名操作 -###07 Classname Operation - -> https://segmentfault.com/a/1190000004894518 - -avalon2的类名操作涉及到ms-class,ms-active,ms-hover，但用法也全变了，行为类似于前两节说的ms-attr,ms-css，目的是将相同行为集中在一起定义。 - -Avalon2 class name operation involves `ms-class, ms-active, ms-hover`,but the usage has changed, similar to the behavior of the previous two `ms-attr, ms-css`, the purpose is to put together the same behavior definition. - -由于ms-class,ms-active, ms-hover语法很相似，我们就以ms-class为例吧。ms-class可以对应vm中的一个字符串属性，里面可以有空格（一个空格就是一个类名嘛） - -Because of `ms-class, ms-active, ms-hover` syntax is very similar, we take a example of `ms-class`.`ms-class` can be a string attribute in the corresponding VM, which can be a space (a space is a classname.) - - - vm.classes = "aaa bbb ccc" -
- -显然这不够灵活，我们有时需要在某个场合添加某类名，到另一个场合就要移除它。于是从我们React的classSet与Classnames插件中涉取灵感，让它支持更复杂的数据型。比如布尔对象（键名为类名，值为布尔的对象，值决定是否添加与移除），还有一维数组，里面可以是null, 字符串，布尔，布尔对象，我会根据其真假值或布尔对象的值的真假，合并成一组类名。 - - -Obviously this is not flexible enough, we sometimes need to add a class name on certain occasions, it is necessary to remove it to another occasion. So from our React ClassIn and Classnames plug-ins involved in the inspiration, it supports more complex data type. Such as Boolean objects (key name for the class name, the value of Boolean objects, the value of whether to add and remove), there is a one-dimensional array, which can be null, string, Boolean, Boolean objects, Or Boolean object values ​​are true and false, combined into a group of class names. - - -> 以下安利一下React的Classnames插件: - Classnames plug-ins: - https://github.com/JedWatson/classnames - - classNames('foo', 'bar'); // => 'foo bar' - classNames('foo', { bar: true }); // => 'foo bar' - classNames({ 'foo-bar': true }); // => 'foo-bar' - classNames({ 'foo-bar': false }); // => '' - classNames({ foo: true }, { bar: true }); // => 'foo bar' - classNames({ foo: true, bar: true }); // => 'foo bar' - - // lots of arguments of various types - classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux' - - // other falsy values are just ignored - classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1' - - -avalon2则是这样用的 - -Avalon2 is used in this way - -
- -如果还不明白，可以翻看avalon2的源码，ms-class的自由度之高，绝对不逊于1.*的新旧风格！ - -If you do not understand, can look at the source code of avalon2 ms-class, the high degree of freedom, definitely not inferior to old style 1.*! - - - - - New Style - - - - - - - -
点我
-
它的类名是 aaa bbb ccc
-
它的类名是 xxx yyy zzz
-
它的类名是 xxx yyy
- - - -![xx](./lesson07_1.gif) - - - - - ms-class - - - - - - -
测试:active
-
测试:hover
-
- 类名通过插值表达式生成
- {{@w}} * {{@h}}
- -
-

- - - - -![xx](./lesson07_2.gif) - - - - - - - - - - - -
- - - - - - -![xx](./lesson07_3.gif) - -ms-class、 ms-hover、 ms-active涵盖了所有与类名相应的需求，并且使用上比jQuery还简单。最后看一下用它实现斑马线的效果吧。 - -`ms-class、 ms-hover、 ms-active` covers all the requirements corresponding to the class name, and the use of more simple than jQuery. Finally look at the effect of using it to achieve zebra crossing. - - - - - ms-class - - - - - - - - - - - - -
{{$index}}{{ new Date - 0 | date("yyyy-MM-dd")}}
- - - +### 07 类名操作 +### 07 Classname Operation + +> https://segmentfault.com/a/1190000004894518 + +avalon2的类名操作涉及到ms-class,ms-active,ms-hover，但用法也全变了，行为类似于前两节说的ms-attr,ms-css，目的是将相同行为集中在一起定义。 + +Avalon2 class name operation involves `ms-class, ms-active, ms-hover`,but the usage has changed, similar to the behavior of the previous two `ms-attr, ms-css`, the purpose is to put together the same behavior definition. + +由于ms-class,ms-active, ms-hover语法很相似，我们就以ms-class为例吧。ms-class可以对应vm中的一个字符串属性，里面可以有空格（一个空格就是一个类名嘛） + +Because of `ms-class, ms-active, ms-hover` syntax is very similar, we take a example of `ms-class`.`ms-class` can be a string attribute in the corresponding VM, which can be a space (a space is a classname.) + + + vm.classes = "aaa bbb ccc" +
+ +显然这不够灵活，我们有时需要在某个场合添加某类名，到另一个场合就要移除它。于是从我们React的classSet与Classnames插件中涉取灵感，让它支持更复杂的数据型。比如布尔对象（键名为类名，值为布尔的对象，值决定是否添加与移除），还有一维数组，里面可以是null, 字符串，布尔，布尔对象，我会根据其真假值或布尔对象的值的真假，合并成一组类名。 + + +Obviously this is not flexible enough, we sometimes need to add a class name on certain occasions, it is necessary to remove it to another occasion. So from our React ClassIn and Classnames plug-ins involved in the inspiration, it supports more complex data type. Such as Boolean objects (key name for the class name, the value of Boolean objects, the value of whether to add and remove), there is a one-dimensional array, which can be null, string, Boolean, Boolean objects, Or Boolean object values ​​are true and false, combined into a group of class names. + + +> 以下安利一下React的Classnames插件: + Classnames plug-ins: + https://github.com/JedWatson/classnames + + classNames('foo', 'bar'); // => 'foo bar' + classNames('foo', { bar: true }); // => 'foo bar' + classNames({ 'foo-bar': true }); // => 'foo-bar' + classNames({ 'foo-bar': false }); // => '' + classNames({ foo: true }, { bar: true }); // => 'foo bar' + classNames({ foo: true, bar: true }); // => 'foo bar' + + // lots of arguments of various types + classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux' + + // other falsy values are just ignored + classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1' + + +avalon2则是这样用的 + +Avalon2 is used in this way + +
+ +如果还不明白，可以翻看avalon2的源码，ms-class的自由度之高，绝对不逊于1.*的新旧风格！ + +If you do not understand, can look at the source code of avalon2 ms-class, the high degree of freedom, definitely not inferior to old style 1.*! + + + + + New Style + + + + + + + +
点我
+
它的类名是 aaa bbb ccc
+
它的类名是 xxx yyy zzz
+
它的类名是 xxx yyy
+ + + +![xx](./lesson07_1.gif) + + + + + ms-class + + + + + + +
测试:active
+
测试:hover
+
+ 类名通过插值表达式生成
+ {{@w}} * {{@h}}
+ +
+

+ + + + +![xx](./lesson07_2.gif) + + + + + + + + + + + +
+ + + + + + +![xx](./lesson07_3.gif) + +ms-class、 ms-hover、 ms-active涵盖了所有与类名相应的需求，并且使用上比jQuery还简单。最后看一下用它实现斑马线的效果吧。 + +`ms-class、 ms-hover、 ms-active` covers all the requirements corresponding to the class name, and the use of more simple than jQuery. Finally look at the effect of using it to achieve zebra crossing. + + + + + ms-class + + + + + + + + + + + + +
{{$index}}{{ new Date - 0 | date("yyyy-MM-dd")}}
+ + + ![xx](./lesson07_4.gif) \ No newline at end of file diff --git a/tutorials/lesson08.md b/tutorials/lesson08.md index 780c5038b..663a6b897 100644 --- a/tutorials/lesson08.md +++ b/tutorials/lesson08.md @@ -1,105 +1,105 @@ -###08 插入移除操作 -###08 Insert Removal operation - -> https://segmentfault.com/a/1190000004896630 - -本节介绍的ms-if指令与ms-visible很相似，都是让某元素“看不见”，不同的是ms-visible是通过CSS实现，ms-if是通过移除插入节点实现。 - -This section describes the `ms-if` command and `ms-visible` is very similar, are to make an element "invisible", the difference is that `ms-visible` is achieved through the CSS, `ms-if` is to remove the insert node. - -ms-if的用法与1.×时别无二致，只要值是真，就插入，为假时，就在原位置上替换为一个注释节点做占位符。 - -The use of `ms-if` and 1. × no different, as long as the value is true to insert, when false, in the original location to replace a node to do a placeholder comment. - -> 注意： 在avalon1.*中，存在一个叫ms-if-loop的辅助指令，这个在2.0移除了，这个直接使用filterBy过滤器就能实现相似功能。 - ->Note: In avalon1. *, There is a helper instruction called `ms-if-loop`, which is removed in 2.0. This is done using filterBy filters. - - - - - ms-if - - - - - -
- 这是比较输出结果:{{@object.id != null}} -
- 这是visible的: - {{@object.message}} -
-
- 这是if的: - {{@object.message}} -
-
- - - -![xx](./lesson08_1.gif) - -现在我们用ms-if重新做一下切换卡吧 - -Now we use `ms-if` to do something to switch cards - - - - - ms-if - - - - - - - -
- -
-
- - - -![xx](./lesson08_2.gif) +### 08 插入移除操作 +### 08 Insert Removal operation + +> https://segmentfault.com/a/1190000004896630 + +本节介绍的ms-if指令与ms-visible很相似，都是让某元素“看不见”，不同的是ms-visible是通过CSS实现，ms-if是通过移除插入节点实现。 + +This section describes the `ms-if` command and `ms-visible` is very similar, are to make an element "invisible", the difference is that `ms-visible` is achieved through the CSS, `ms-if` is to remove the insert node. + +ms-if的用法与1.×时别无二致，只要值是真，就插入，为假时，就在原位置上替换为一个注释节点做占位符。 + +The use of `ms-if` and 1. × no different, as long as the value is true to insert, when false, in the original location to replace a node to do a placeholder comment. + +> 注意： 在avalon1.*中，存在一个叫ms-if-loop的辅助指令，这个在2.0移除了，这个直接使用filterBy过滤器就能实现相似功能。 + +>Note: In avalon1. *, There is a helper instruction called `ms-if-loop`, which is removed in 2.0. This is done using filterBy filters. + + + + + ms-if + + + + + +
+ 这是比较输出结果:{{@object.id != null}} +
+ 这是visible的: + {{@object.message}} +
+
+ 这是if的: + {{@object.message}} +
+
+ + + +![xx](./lesson08_1.gif) + +现在我们用ms-if重新做一下切换卡吧 + +Now we use `ms-if` to do something to switch cards + + + + + ms-if + + + + + + + +
+ +
+
+ + + +![xx](./lesson08_2.gif) diff --git a/tutorials/lesson09.md b/tutorials/lesson09.md index 4826b370b..a7d020e54 100644 --- a/tutorials/lesson09.md +++ b/tutorials/lesson09.md @@ -1,276 +1,276 @@ -###09 循环操作 -###09 Loop operation - ->https://segmentfault.com/a/1190000004908426 - -avalon2的循环指令的用法完全改变了。avalon最早期从knockout那样抄来ms-each,ms-with，分别用于数组循环与对象循环。它们都是针对元素内容进行循环。后来又从angular那里抄来了ms-repeat， 这是循环元素内部的。 - -The use of the loop directive for avalon2 has changed completely. Avalon earliest from the knockout copied to `ms-each, ms-with`, respectively, for the array loop and object loop. They are for the elements of the content cycle. Later, from the angular copied to the `ms-repeat`, which is the internal elements of the cycle. - -到avalon2，这三个指令合并成一个ms-for指令 ，用法与angular更相似，但没有$index, $last, $first, $middle. - -To avalon2, these three instructions are merged into an ms-for command that is more similar to angular, but not `$index`, `$last`, `$first`, `$middle`. - -如果想得到数组元素或对象的键值，在in关键字前指定一个新变量 - -If you want to get an array element or object key value, specify a new variable before the `in` keyword - -
{{el}}
- -如果要指定数组索引值或对象的键名，那么需要加一个小括号 - -If you want to specify the array index value or the key name of the object, you need to add a parenthesis - -
{{el}}
- -我们可以用limitBy, filterBy， orderBy, selectBy过滤器生成新的循环体 - -We can use the `limitBy`, `filterBy`, `orderBy`, `selectBy` filter to generate a new loop body - -
{{el}}
- -如果用limitBy过滤器，那么数组的长度或对象的大小会变小，那我们现在就不知道现在的长度，因此我们需要另一个变量引用新对象新数组 - -If we use the `limitBy` filter, then the length of the array or the size of the object will become smaller, then we now do not know the length, so we need another variable reference new object array - -
{{el}}::{{newArray.length}}
- -如果想实现之前的$fist, $last效果，那就需要用到js指令 - -If you want to achieve before the `$fist`, `$last` effect, it needs to use js instructions - -
- - -
- - -这是我们第一次见到以注释节点存在的指令了。实质上，ms-if的值为false，创建的注释节点也算是一种注释指令。 - -而avalon2是没有像angular那样的ng-repeat-start, ng-repeat-end这样圈 定某个范围的辅助指令。换言之，不能像ms-repeat那样循环多个元素。 - -这时我们需要了解一下其内部机制。这个以元素属性存在的ms-for指令，会翻译成以注释节点存在的ms-for指令。 - - -This is the first time we have seen the existence of instructions to note the node. In essence, the value of `ms-if` is false, and the comment node created is a commented instruction. - -And avalon2 is not as angular as the `ng-repeat-start`, `ng-repeat-end` this delineation of a range of auxiliary instructions. In other words, you can not loop multiple elements like `ms-repeat`. - -At this point we need to understand its internal mechanisms. This ms-for directive, which exists as an element attribute, is translated into an `ms-for` instruction that exists as an annotation node. - - -
{{el}}::{{$index}}
- -等价于 - -Equivalent to - - -
{{el}}::{{$index}}
- - -这有点复杂，但可以解决我们循环多个元素的问题 - -This is a little complicated, but it can solve the problem of looping multiple elements - - - {{el.td1}} - {{el.td2}} - - - ->注意，avalon2的监控数组已经移除size()方法，由于内部使用了虚拟DOM，你直接使用@array.length就能得知道当前长度了。 - ->Note that the avalon2 monitor array has removed the `size()` method, and because of the internal use of the virtual DOM, you can use `@array.length` to know the current length. - ->avalon2也没有angular的track by机制，或像React那样强制使用key.这种为优化排序性能的方法，avalon内部帮你搞定，就不需要你多写什么了。 - ->Avalon2 no angular track by mechanism, or as React as mandatory use key. This sort of performance optimization methods, avalon internal help you get, you do not need to write anything. - - - - - - - - - - - - - - -![xx](./lesson09_1.gif) - -我们再来看一下如何循环二维数组 - -Let us look at how to cycle two-dimensional array - - - - - - - - - - - - - -
{{elem}} 它位于第{{$index}}行
- - - -![xx](./lesson09_2.png) - -释节点，你用过angular也会发现类似的东西，这是方便框架对这些元素进行排序增删操作设计的。大家不要手动移除它们。 - -我们再看一个经典的例子，如何通过操作数组为列表添加或移除某一项！另，大家也可以对照这里看看avalon1是怎么实现的，你就明白avalon2在这方面的巨大优势与便利。 - -Release node, you will also find similar things used angular, which is convenient for these elements of the framework of the order of additions and deletions designed. Do not manually remove them. - -Let us look at a classic example of how to manipulate the array for the list to add or remove an item! In addition, we can also control here to see how avalon1 is achieved, you will understand avalon2 great advantage in this area and convenience. - - - - - - ms-repeat - - - - - -

监控数组拥有以下方法，我们可以操作它们就能同步对应的区域

-
- push, shift, unshift, pop, slice, splice, remove, removeAt, removeAll, clear, - ensure, pushArray, sort, reverse, set -
- -

对数组进行push操作，并回车

-

对数组进行unshift操作，并回车

-

对数组进行ensure操作，并回车
- (只有数组不存在此元素才push进去)

-

对数组进行remove操作，并回车

-

对数组进行removeAt操作，并回车

-

-

-

-

-

当前数组的长度为{{@array.length}}。

- - - - -![xx](./lesson09_3.gif) - -最后我们来一个表格的实用例子。之前avalon的大表格渲染时存在性能问题，现在大大得到改进了。 - -Finally, we come to a practical example of the form. Before avalon large table rendering performance problems, and now greatly improved. - - - - - TODO supply a title - - - - - - - -
- - - - - -
{{el}}
{{td}}
-
- - - +### 09 循环操作 +### 09 Loop operation + +>https://segmentfault.com/a/1190000004908426 + +avalon2的循环指令的用法完全改变了。avalon最早期从knockout那样抄来ms-each,ms-with，分别用于数组循环与对象循环。它们都是针对元素内容进行循环。后来又从angular那里抄来了ms-repeat， 这是循环元素内部的。 + +The use of the loop directive for avalon2 has changed completely. Avalon earliest from the knockout copied to `ms-each, ms-with`, respectively, for the array loop and object loop. They are for the elements of the content cycle. Later, from the angular copied to the `ms-repeat`, which is the internal elements of the cycle. + +到avalon2，这三个指令合并成一个ms-for指令 ，用法与angular更相似，但没有$index, $last, $first, $middle. + +To avalon2, these three instructions are merged into an ms-for command that is more similar to angular, but not `$index`, `$last`, `$first`, `$middle`. + +如果想得到数组元素或对象的键值，在in关键字前指定一个新变量 + +If you want to get an array element or object key value, specify a new variable before the `in` keyword + +
{{el}}
+ +如果要指定数组索引值或对象的键名，那么需要加一个小括号 + +If you want to specify the array index value or the key name of the object, you need to add a parenthesis + +
{{el}}
+ +我们可以用limitBy, filterBy， orderBy, selectBy过滤器生成新的循环体 + +We can use the `limitBy`, `filterBy`, `orderBy`, `selectBy` filter to generate a new loop body + +
{{el}}
+ +如果用limitBy过滤器，那么数组的长度或对象的大小会变小，那我们现在就不知道现在的长度，因此我们需要另一个变量引用新对象新数组 + +If we use the `limitBy` filter, then the length of the array or the size of the object will become smaller, then we now do not know the length, so we need another variable reference new object array + +
{{el}}::{{newArray.length}}
+ +如果想实现之前的$fist, $last效果，那就需要用到js指令 + +If you want to achieve before the `$fist`, `$last` effect, it needs to use js instructions + +
+ + +
+ + +这是我们第一次见到以注释节点存在的指令了。实质上，ms-if的值为false，创建的注释节点也算是一种注释指令。 + +而avalon2是没有像angular那样的ng-repeat-start, ng-repeat-end这样圈 定某个范围的辅助指令。换言之，不能像ms-repeat那样循环多个元素。 + +这时我们需要了解一下其内部机制。这个以元素属性存在的ms-for指令，会翻译成以注释节点存在的ms-for指令。 + + +This is the first time we have seen the existence of instructions to note the node. In essence, the value of `ms-if` is false, and the comment node created is a commented instruction. + +And avalon2 is not as angular as the `ng-repeat-start`, `ng-repeat-end` this delineation of a range of auxiliary instructions. In other words, you can not loop multiple elements like `ms-repeat`. + +At this point we need to understand its internal mechanisms. This ms-for directive, which exists as an element attribute, is translated into an `ms-for` instruction that exists as an annotation node. + + +
{{el}}::{{$index}}
+ +等价于 + +Equivalent to + + +
{{el}}::{{$index}}
+ + +这有点复杂，但可以解决我们循环多个元素的问题 + +This is a little complicated, but it can solve the problem of looping multiple elements + + + {{el.td1}} + {{el.td2}} + + + +>注意，avalon2的监控数组已经移除size()方法，由于内部使用了虚拟DOM，你直接使用@array.length就能得知道当前长度了。 + +>Note that the avalon2 monitor array has removed the `size()` method, and because of the internal use of the virtual DOM, you can use `@array.length` to know the current length. + +>avalon2也没有angular的track by机制，或像React那样强制使用key.这种为优化排序性能的方法，avalon内部帮你搞定，就不需要你多写什么了。 + +>Avalon2 no angular track by mechanism, or as React as mandatory use key. This sort of performance optimization methods, avalon internal help you get, you do not need to write anything. + + + + + + + + + + + + + + +![xx](./lesson09_1.gif) + +我们再来看一下如何循环二维数组 + +Let us look at how to cycle two-dimensional array + + + + + + + + + + + + + +
{{elem}} 它位于第{{$index}}行
+ + + +![xx](./lesson09_2.png) + +释节点，你用过angular也会发现类似的东西，这是方便框架对这些元素进行排序增删操作设计的。大家不要手动移除它们。 + +我们再看一个经典的例子，如何通过操作数组为列表添加或移除某一项！另，大家也可以对照这里看看avalon1是怎么实现的，你就明白avalon2在这方面的巨大优势与便利。 + +Release node, you will also find similar things used angular, which is convenient for these elements of the framework of the order of additions and deletions designed. Do not manually remove them. + +Let us look at a classic example of how to manipulate the array for the list to add or remove an item! In addition, we can also control here to see how avalon1 is achieved, you will understand avalon2 great advantage in this area and convenience. + + + + + + ms-repeat + + + + + +

监控数组拥有以下方法，我们可以操作它们就能同步对应的区域

+
+ push, shift, unshift, pop, slice, splice, remove, removeAt, removeAll, clear, + ensure, pushArray, sort, reverse, set +
+ +

对数组进行push操作，并回车

+

对数组进行unshift操作，并回车

+

对数组进行ensure操作，并回车
+ (只有数组不存在此元素才push进去)

+

对数组进行remove操作，并回车

+

对数组进行removeAt操作，并回车

+

+

+

+

+

当前数组的长度为{{@array.length}}。

+ + + + +![xx](./lesson09_3.gif) + +最后我们来一个表格的实用例子。之前avalon的大表格渲染时存在性能问题，现在大大得到改进了。 + +Finally, we come to a practical example of the form. Before avalon large table rendering performance problems, and now greatly improved. + + + + + TODO supply a title + + + + + + + +
+ + + + + +
{{el}}
{{td}}
+
+ + + ![xx](./lesson09_4.gif) \ No newline at end of file diff --git a/tutorials/lesson10.md b/tutorials/lesson10.md index 9396b4d90..9b9dca1d5 100644 --- a/tutorials/lesson10.md +++ b/tutorials/lesson10.md @@ -1,5 +1,5 @@ -#事件绑定 -#Events binding +# 事件绑定 +# Events binding avalon2的事件指令，比起avalon1来强大多了。 avalon2 has much more powerful evevts directive than 1.X versions. 首先其内部是使用事件代理实现的，能冒泡的事件全部绑定document上。只有旧式IE的几个事件还绑定在原元素上。 diff --git a/tutorials/lesson12.md b/tutorials/lesson12.md index 1d5c49e9a..74da49d1e 100644 --- a/tutorials/lesson12.md +++ b/tutorials/lesson12.md @@ -1,5 +1,5 @@ -#数据验证 -#Data Validation +# 数据验证 +# Data Validation avalon2砍掉了不少功能（如ms-include,ms-data），腾出空间加了其他更有用的功能。数据验证就是其中之一。 Many features have been stripped from avalon 2, such as ms-include and ms-data,to provide enough room for the other useful features.Data validation is one of those important features. diff --git a/tutorials/lesson15.md b/tutorials/lesson15.md index d47b86571..80b193c63 100644 --- a/tutorials/lesson15.md +++ b/tutorials/lesson15.md @@ -1,7 +1,7 @@ -##avalon的指令在上一节已经全部介绍完毕，当然有的语焉不详，如ms-js。本节主要讲述一下我对这方面的思考与探索。 -##avalon directives have been all introduced to you in last section,of course there were some vagues like ms-js.I will talk about my thinkings and exploring of directives in this section. -##MVVM的成功很大一语分是来自于其指令，或叫绑定。让操作视图的功能交由形形式式的指令来代劳。VM，成了一个大管家。它只一个反射体。我们对它的操作，直接影响到视图。因此俗称“操作数据即操作视图”！至于它是怎么影响视图，avalon视其版本的不同，也有不同的解法。如果抛开avalon，纵观世上所有MVVM框架，大抵有如下几种方式 -##a lot of parts of MVVM success come from diretives,or binding,Diretives operates DOM for you.VM, has become a butler.It‘s a reflector，operations to VM will reflect to View.This is why we all call it“operating variables is operating View“！As to exactly how does VM changes View，different avalon has different method。Regardless of avalon，all MVVM frameworks use the following methods. +## avalon的指令在上一节已经全部介绍完毕，当然有的语焉不详，如ms-js。本节主要讲述一下我对这方面的思考与探索。 +## avalon directives have been all introduced to you in last section,of course there were some vagues like ms-js.I will talk about my thinkings and exploring of directives in this section. +## MVVM的成功很大一语分是来自于其指令，或叫绑定。让操作视图的功能交由形形式式的指令来代劳。VM，成了一个大管家。它只一个反射体。我们对它的操作，直接影响到视图。因此俗称“操作数据即操作视图”！至于它是怎么影响视图，avalon视其版本的不同，也有不同的解法。如果抛开avalon，纵观世上所有MVVM框架，大抵有如下几种方式 +## a lot of parts of MVVM success come from diretives,or binding,Diretives operates DOM for you.VM, has become a butler.It‘s a reflector，operations to VM will reflect to View.This is why we all call it“operating variables is operating View“！As to exactly how does VM changes View，different avalon has different method。Regardless of avalon，all MVVM frameworks use the following methods. 1.函数wrapper:将原数据对象重新改造，所有属性都变成一个函数，有参数时就是赋值，进行视图同步与回调派发，没有参数时就取值，进行依赖收集。如knockout.js。 1.function wrapper:transform the original data object,make every property a function,while with a parameter it‘s a value assigning,the function Synchronize View and distribute callbacks,while no parameter,it gets it's value and collects relys。For example：knockout.js.