diff --git a/component/async/index.html b/component/async/index.html index fc7a373c..ffebddb9 100644 --- a/component/async/index.html +++ b/component/async/index.html @@ -118,13 +118,13 @@
开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
@@ -240,13 +240,13 @@

开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
diff --git a/component/data/index.html b/component/data/index.html index 6a81d3b2..de22d09b 100644 --- a/component/data/index.html +++ b/component/data/index.html @@ -118,13 +118,13 @@
开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
@@ -246,13 +246,13 @@

开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
diff --git a/component/define/index.html b/component/define/index.html index 817bdcfb..4e5bdc68 100644 --- a/component/define/index.html +++ b/component/define/index.html @@ -8,17 +8,17 @@ - 组件 | San + 组件定义 | San - + - + @@ -118,13 +118,13 @@
开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
@@ -181,7 +181,7 @@

- 组件 + 组件定义

@@ -235,13 +235,13 @@

开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
diff --git a/component/error/index.html b/component/error/index.html index d165515a..575497ed 100644 --- a/component/error/index.html +++ b/component/error/index.html @@ -118,13 +118,13 @@
开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
@@ -241,13 +241,13 @@

开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
diff --git a/component/hydrate/index.html b/component/hydrate/index.html index 32447dca..7968ca32 100644 --- a/component/hydrate/index.html +++ b/component/hydrate/index.html @@ -118,13 +118,13 @@
开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
@@ -258,13 +258,13 @@

开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
diff --git a/component/lifecycle/index.html b/component/lifecycle/index.html index 21dc7e71..1fc60699 100644 --- a/component/lifecycle/index.html +++ b/component/lifecycle/index.html @@ -120,13 +120,13 @@
开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
@@ -248,13 +248,13 @@

开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
diff --git a/component/template-component/index.html b/component/template-component/index.html index c4c03275..d7b1d8be 100644 --- a/component/template-component/index.html +++ b/component/template-component/index.html @@ -118,13 +118,13 @@
开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
@@ -248,13 +248,13 @@

开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
diff --git a/component/tree/index.html b/component/tree/index.html index 179c4b4c..3343060e 100644 --- a/component/tree/index.html +++ b/component/tree/index.html @@ -118,13 +118,13 @@
开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
@@ -295,13 +295,13 @@

开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
diff --git a/component/view/index.html b/component/view/index.html index 8ba49623..68ebc570 100644 --- a/component/view/index.html +++ b/component/view/index.html @@ -118,13 +118,13 @@
开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
@@ -268,13 +268,13 @@

el

组件实

开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
diff --git a/doc/api/index.html b/doc/api/index.html index 836d43fe..857f853d 100644 --- a/doc/api/index.html +++ b/doc/api/index.html @@ -18,7 +18,7 @@ - + @@ -118,13 +118,13 @@
开始
模板
数据操作
-
数据校验
样式
条件
循环
事件处理
表单
插槽
+
属性透传
过渡
组件
@@ -192,13 +192,13 @@

该文档描述了组件的 API，在 San 主模块上暴露的 API 请参考文档 主模块API。

初始化参数

data

解释：

-

组件初始化数据。通常在组件反解的场景下使用。

+

组件初始化数据。通常在组件反解的场景下使用。

类型： Object

用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var MyComponent = san.defineComponent({});

var myComponent = new MyComponent({
    el: document.getElementById('my-label'),
    data: {
        email: 'errorrik@gmail.com',
        name: 'errorrik'
    }
});

/* html:
<label id="my-label">
    <span title="errorrik@gmail.com" prop-title="{{email}}">errorrik</span>
</label>

el

解释：

-

组件根元素。传入此参数意味着不使用组件的 template 作为视图模板，组件视图由 San 自动反解。详情可参考组件反解文档。

+

组件根元素。传入此参数意味着不使用组件的 template 作为视图模板，组件视图由 San 自动反解。详情可参考组件反解文档。

类型： HTMLElement

用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var MyComponent = san.defineComponent({});

var myComponent = new MyComponent({
    el: document.getElementById('my-label'),
    data: {
        email: 'errorrik@gmail.com',
        name: 'errorrik'
    }
});

/* html:
<label id="my-label">
    <span title="errorrik@gmail.com" prop-title="{{email}}">errorrik</span>
</label>
*/
@@ -211,7 +211,7 @@

owner

<
  • 组件无需手工 dispose，owner dispose 时会自动释放
  • 组件及其子组件 dispatch 的消息，owner 组件可以接收
    • -

    更多说明请参考owner与parent文档。

    +

    更多说明请参考owner与parent文档。

    注意：

    指定 owner 后，不允许将组件 push 到 owner 的 children 中

    用法：

    @@ -221,7 +221,7 @@

    owner

    <

    source

    版本：>= 3.7.0

    类型： string|Object

    解释：

    -

    通过 HTML 格式的一个标签，声明组件与 owner 之间的数据绑定和事件。指定 source 同时需要指定 owner。更详细的用法请参考 手动创建子组件 文档，更多声明格式细节请参考 模板 与 事件 文档。

    +

    通过 HTML 格式的一个标签，声明组件与 owner 之间的数据绑定和事件。指定 source 同时需要指定 owner。更详细的用法请参考 手动创建子组件 文档，更多声明格式细节请参考 模板 与 事件 文档。

    提醒：

    source 串的标签名称通常没什么用，除了以下情况：组件本身根节点为 template 时，以 source 的标签名称为准。

    用法：

    @@ -236,7 +236,7 @@ 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var MyComponent = san.defineComponent({
        template: '<span>transition</span>'
    });

    var myComponent = new MyComponent({
        transition: {
            enter: function (el, done) { /* 进入时的过渡动画 */ },
            leave: function (el, done) { /* 离开时的过渡动画 */ },
        }
    });
    -

    生命周期钩子

    生命周期代表组件的生存过程，在每个过程到达时将触发钩子函数。具体请参考生命周期文档。

    +

    生命周期钩子

    生命周期代表组件的生存过程，在每个过程到达时将触发钩子函数。具体请参考生命周期文档。

    compiled

    解释：

    组件视图模板编译完成。组件上的 compiled 方法将会被调用。

    inited

    解释：

    @@ -255,13 +255,13 @@

    error

    <

    解释：

    当捕获一个来自子孙组件的抛出异常时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含异常来源信息的字符串。此钩子捕获异常以后，不会再继续向父节点传递。

    定义组件成员

    template

    解释：

    -

    组件的视图模板。详细描述请参考视图模板文档。

    +

    组件的视图模板。详细描述请参考视图模板文档。

    类型： string

    用法：

    1
    2
    3
    san.defineComponent({
        template: '<span title="{{text}}">{{text}}</span>'
    });

    filters

    解释：

    -

    声明组件视图模板中可以使用哪些过滤器。详细描述请参考过滤器文档。

    +

    声明组件视图模板中可以使用哪些过滤器。详细描述请参考过滤器文档。

    类型： Object

    用法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    san.defineComponent({
        template: '<a>{{createTime | dateFormat("yyyy-MM-dd")}}</a>',

        filters: {
            dateFormat: function (value, format) {
                return moment(value).format(format);
            }
        }
    });
    @@ -272,27 +272,27 @@

    filte

    components

    解释：

    -

    声明组件中可以使用哪些类型的子组件。详细描述请参考components文档。

    +

    声明组件中可以使用哪些类型的子组件。详细描述请参考components文档。

    类型： Object

    用法：

    1
    2
    3
    4
    5
    6
    var AddForm = san.defineComponent({
        components: {
            'ui-timepicker': TimePicker,
            'ui-calendar': Calendar
        }
    });

    computed

    解释：

    -

    声明组件中的计算数据。详细描述请参考计算数据文档。

    +

    声明组件中的计算数据。详细描述请参考计算数据文档。

    类型： Object

    用法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    san.defineComponent({
        template: '<a>{{name}}</a>',

        // name 数据项由 firstName 和 lastName 计算得来
        computed: {
            name: function () {
                return this.data.get('firstName') + ' ' + this.data.get('lastName');
            }
        }
    });

    messages

    解释：

    -

    声明处理子组件派发消息的方法。详细描述请参考消息文档。

    +

    声明处理子组件派发消息的方法。详细描述请参考消息文档。

    类型： Object

    用法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var Select = san.defineComponent({
        template: '<ul><slot></slot></ul>',

        messages: {
            'UI:select-item-selected': function (arg) {
                // arg.target 可以拿到派发消息的组件
                var value = arg.value;
                this.data.set('value', value);
            }
        }
    });

    initData

    解释：

    -

    返回组件实例的初始数据。详细描述请参考初始数据文档。

    +

    返回组件实例的初始数据。详细描述请参考初始数据文档。

    类型： function():Object

    用法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var MyApp = san.defineComponent({
        template: '<ul><li s-for="item in list">{{item}}</li></ul>',

        initData: function () {
            return {
                list: ['san', 'er', 'esui', 'etpl', 'esl']
            };
        }
    });
    @@ -326,6 +326,14 @@ 

    1
    2
    3
    4
    5
    6
    7
    var MyComponent = san.defineComponent({
        template: '<span>transition</span>',
        transition: {
            enter: function (el) { /* 根节点进入时的过渡动画 */ },
            leave: function (el, done) { /* 根节点离开时的过渡动画 */ },
        }
    });
    +

    inheritAttrs

    解释：

    +

    属性透传功能是否生效。默认值为 true。当属性透传功能关闭时，id / class / style 的透传也将失效。

    +

    版本：>= 3.14.1

    +

    类型： boolean

    +

    用法：

    +
    1
    2
    3
    4
    var MyComponent = san.defineComponent({
        inheritAttrs: false,
        template: '<span><slot/></span>'
    });
    + +

    autoFillStyleAndId

    解释：

    组件根节点是否应用外部通过绑定传入的 id / class / style。默认为 true。

    版本：>= 3.7.5

    @@ -364,25 +372,25 @@

    on

    描述： on({string}eventName, {Function}eventListener)

    解释：

    -

    添加自定义事件监听器。 on 一般仅用在使用 JavaScript 动态创建的组件中，通过视图模板创建的子组件应通过 on- 的方式绑定监听。可参考动态子组件文档

    +

    添加自定义事件监听器。 on 一般仅用在使用 JavaScript 动态创建的组件中，通过视图模板创建的子组件应通过 on- 的方式绑定监听。可参考动态子组件文档

    un

    描述： un({string}eventName, {Function=}eventListener)

    解释：

    移除事件监听器。 当 eventListener 参数为空时，移除所有 eventName 事件的监听器。

    dispatch

    描述： dispatch({string}name, {*}value)

    解释：

    -

    派发一个消息。消息将沿着组件树向上传递，直到遇到第一个处理该消息的组件。上层组件通过 messages 声明组件要处理的消息。消息主要用于组件与非 owner 的上层组件进行通信。可参考消息文档。

    +

    派发一个消息。消息将沿着组件树向上传递，直到遇到第一个处理该消息的组件。上层组件通过 messages 声明组件要处理的消息。消息主要用于组件与非 owner 的上层组件进行通信。可参考消息文档。

    用法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    var SelectItem = san.defineComponent({
        template:
            '<li on-click="select" class="{{value === selectValue ? \'selected\' : \'\'">'
            + '<slot></slot>'
            + '</li>',

        // 子组件在各种时机派发消息
        select: function () {
            var value = this.data.get('value');
            this.dispatch('UI:select-item-selected', value);
        },

        attached: function () {
            this.dispatch('UI:select-item-attached');
        },

        detached: function () {
            this.dispatch('UI:select-item-detached');
        }
    });

    var Select = san.defineComponent({
        template: '<ul><slot></slot></ul>',

        // 上层组件处理自己想要的消息
        messages: {
            'UI:select-item-selected': function (arg) {
                var value = arg.value;
                this.data.set('value', value);

                // 原则上上层组件允许更改下层组件的数据，因为更新流是至上而下的
                var len = this.items.length;
                while (len--) {
                    this.items[len].data.set('selectValue', value);
                }
            },

            'UI:select-item-attached': function (arg) {
                this.items.push(arg.target);
                arg.target.data.set('selectValue', this.data.get('value'));
            },

            'UI:select-item-detached': function (arg) {
                var len = this.items.length;
                while (len--) {
                    if (this.items[len] === arg.target) {
                        this.items.splice(len, 1);
                    }
                }
            }
        },

        inited: function () {
            this.items = [];
        }
    });

    var MyComponent = san.defineComponent({
        components: {
            'ui-select': Select,
            'ui-selectitem': SelectItem
        },

        template: ''
            + '<div>'
            + '  <ui-select value="{=value=}">'
            + '    <ui-selectitem value="1">one</ui-selectitem>'
            + '    <ui-selectitem value="2">two</ui-selectitem>'
            + '    <ui-selectitem value="3">three</ui-selectitem>'
            + '  </ui-select>'
            + '</div>'
    });

    watch

    描述： watch({string}dataName, {function({*}value)}listener)

    解释：

    -

    监听组件的数据变化。通常我们使用绑定，在子组件数据变化时自动更新父组件的对应数据。 watch 一般仅用在使用 JavaScript 动态创建的组件中。可参考动态子组件文档

    +

    监听组件的数据变化。通常我们使用绑定，在子组件数据变化时自动更新父组件的对应数据。 watch 一般仅用在使用 JavaScript 动态创建的组件中。可参考动态子组件文档

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    san.defineComponent({
        // ...

        initLayer: function () {
            if (!this.monthView) {
                var monthView = new MonthView();
                this.monthView = monthView;

                this.monthView.watch('value', (function (value) {
                    this.data.set('value', value);
                }).bind(this));

                this.watch('value', function (value) {
                    monthView.data.set('value', value);
                });

                this.monthView.attach(document.body);
            }
        }
    });

    ref

    描述： ref({string}name)

    解释：

    -

    获取定义了 s-ref 的子组件或 HTMLElement。详细请参考组件层级文档。

    +

    获取定义了 s-ref 的子组件或 HTMLElement。详细请参考组件层级文档。

    注意：组件根元素即使定义了 s-ref，也无法通过 ref 方法获得。获取组件根元素请使用 this.el。

    用法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    var AddForm = san.defineComponent({
        // template

        components: {
            'ui-timepicker': require('../ui/TimePicker'),
            'ui-calendar': require('../ui/Calendar')
        },

        submit: function () {
            this.ref('endDate');
            this.ref('endHour');

            this.ref('rootNode'); // undefined
            this.el;  //根元素 <div class="form"> ... </div>
        }
    });

    /* template:
    <div class="form" s-ref="rootNode">
        <div>预期完成时间：
            <ui-calendar bindx-value="endTimeDate" s-ref="endDate"></ui-calendar>
            <ui-timepicker bindx-value="endTimeHour" s-ref="endHour"></ui-timepicker>
        </div>

        <div class="form-op">
            <button type="button" on-click="submit">ok</button>
        </div>
    </div>
    */
    @@ -391,7 +399,7 @@

    slot

    描述： {Array} slot({string=}name)

    解释：

    获取组件插槽的节点信息。返回值是一个数组，数组中的项是节点对象。通常只有一项，当 slot 声明中应用了 if 或 for 时可能为 0 项或多项。节点对象包含 isScoped 、 isInserted 和 children。

    -

    插槽详细用法请参考 slot 文档。

    +

    插槽详细用法请参考 slot 文档。

    注意：不要对返回的 slot 对象进行任何修改。如果希望操作视图变更，请操作数据。

    用法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    var Panel = san.defineComponent({
        template: '<div><slot s-if="!hidden"/></div>',
    });

    var MyComponent = san.defineComponent({
        components: {
          'x-panel': Panel
        },

        template: ''
            + '<div>'
              + '<x-panel hidden="{{folderHidden}}" s-ref="panel"><p>{{desc}}</p></x-panel>'
            + '</div>',

        attached: function () {
            // 1
            this.ref('panel').slot().length

            var contentSlot = this.ref('panel').slot()[0];

            // truthy
            contentSlot.isInserted

            // falsy
            contentSlot.isScoped
        }
    });


    var myComponent = new MyComponent({
        data: {
            desc: 'MVVM component framework',
        }
    });
    @@ -407,7 +415,7 @@

    ne @@ -434,13 +442,13 @@

    ne
    开始
    模板
    数据操作
    -
    数据校验
    样式
    条件
    循环
    事件处理
    表单
    插槽
    +
    属性透传
    过渡
    组件
    diff --git a/doc/main-members/index.html b/doc/main-members/index.html index 3dee08fb..e5c10cbc 100644 --- a/doc/main-members/index.html +++ b/doc/main-members/index.html @@ -18,7 +18,7 @@ - + @@ -118,13 +118,13 @@
    开始
    模板
    数据操作
    -
    数据校验
    样式
    条件
    循环
    事件处理
    表单
    插槽
    +
    属性透传
    过渡
    组件
    @@ -192,21 +192,21 @@

    组件初始化

    defineComponent

    描述： {Function} defineComponent({Object}propertiesAndMethods)

    解释：

    -

    方法 。定义组件的快捷方法。详细请参考 组件定义 文档。

    +

    方法 。定义组件的快捷方法。详细请参考 组件定义 文档。

    用法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var MyApp = san.defineComponent({
        template: '<ul><li s-for="item in list">{{item}}</li></ul>',

        initData: function () {
            return {
                list: ['san', 'er', 'esui', 'etpl', 'esl']
            };
        }
    });

    defineTemplateComponent

    版本：>= 3.12.0

    描述： {Function} defineTemplateComponent({string|Object}templateOrOptions)

    解释：

    -

    方法 。定义模板组件。详细请参考 模版组件 文档。

    +

    方法 。定义模板组件。详细请参考 模版组件 文档。

    用法：

    1
    2
    3
    var PanelWithHeader = san.defineTemplateComponent(
        '<dl><dt><slot name="header"/></dt><dd><slot/></dd></dl>'
    );

    createComponentLoader

    版本：>= 3.7.0

    描述： {Object} createComponentLoader({Object|Function}options)

    解释：

    -

    方法 。创建组件 Loader，主要应用于子组件的后加载与异步渲染，详细请参考 异步组件 文档。 options 参数为 Object 类型时，支持如下成员：

    +

    方法 。创建组件 Loader，主要应用于子组件的后加载与异步渲染，详细请参考 异步组件 文档。 options 参数为 Object 类型时，支持如下成员：