<commit_before><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <!-- if-repeat-component -->
        <z-if is="{!disabled}">
            <z-repeat items="{items}" xname="parent">
                <z-repeat items="{$value}" xname="child-repeat">
                    <my-component 
                        data-value="{$value}"
                        data-row="{$parent.$index}" 
                        data-col="{$index}"
                        methods="{
                            onClick: onAlert
                        }"
                    ></my-component>
                </z-repeat>
            </z-repeat>
            <h1>switer</h1>
        </z-if>
        <z-repeat items="{todoItems}">
            <p></p>
        </z-repeat>

        <!-- component-state -->
        <my-component
            z-tap="{items}"
            data="{items: items}"
            methods="{onClick: onAlert}"
        ></my-component>

        <!-- local-component-ref -->
        <my-component2 ref="comp2"></my-component2>

        <!-- two way bindings -->
        <input type="text" z-model="inputs.text">
        <textarea z-model="inputs.text"></textarea>
        <select z-model="inputs.text">
            <option value="Please Input" checked>Please Input</option>
            <option value="hello">hello</option>
            <option value="world">world</option>
            <option value="renew">renew</option>
        </select>
        <input type="checkbox" z-model="inputs.check"> <span>is check: {inputs.check ? 'yes':'no'}</span> <br>
        <input type="date" z-model="inputs.date">{inputs.date} <br>
        <input type="range" z-model="inputs.range">{inputs.range} <br>
        <input type="color" z-model="inputs.color">{inputs.color} <br>
        <input type="tel" z-model="inputs.tel">{inputs.tel} <br>
        <input type="url" z-model="inputs.url">{inputs.url} <br>
        <input type="search" z-model="inputs.search">{inputs.search} <br>
        <!-- directives-filter -->
        <p 
            z-class="{show: isShow; hide: !isShow}" 
            z-attr="{disabled: isShow ? isShow : ''}" 
            z-on="{click: onChangeClass}"
        >{part(title)}</p>

        <p data-content="{contents.attr}">{- contents.text}</p>


    </div>
    <script src="../dist/zect.js"></script>
    <script>
        console.time('p')
        Zect.component('my-component', {
            template: '<z-template z-on="{click: onClick}" data-region="comp"><span>{subtitle}</span></z-template>',
            data: {
                items: [],
                subtitle: 'sub title'
            },
            ready: function () {
                setTimeout(function () {
                    this.$data.subtitle = 'modify'
                }.bind(this), 1000)
            },
            methods: {

            }
        })

        var app = new Zect({
            el: '#app',
            components: {
                'my-component2': Zect.extend({
                    template: '<img z-attr="{src:\'http://www.baidu.com/img/bdlogo.png\'}" alt="" />'
                })
            },
            directives: {
                tap: {
                    bind: function () {
                        // console.log(this.$el)
                    }
                }
            },
            data: function () {
                return {
                    todoItems:[],
                    items: [[1]],
                    title: 'zect data-binding',
                    disabled: false,
                    isShow: true,
                    person: null,
                    a: undefined,
                    inputs: {
                        text: 'Please Input',
                        check: false,
                        date: '2014-10-11',
                        range: 1,
                        tel: '',
                        color: 'blue',
                        search: 'kw',
                        url: 'http://'
                    },
                    contents: {
                        text: '<h1>Rich html content</h1>',
                        attr: 'atrribute"</p><p>'
                    }
                }
            },
            computed: {
                length: {
                    deps: ['title'],
                    fn: function () {
                        return this.title.length
                    }
                }
            },
            ready: function () {
                console.timeEnd('p')
                setTimeout( function() {
                    this.$data.text = 'renew'
                    // this.$data.inputs.text = '<div>hello world</div>'
                    // this.$data.isShow = false
                    this.$set('items', [[1, 2]])
                }.bind(this), 3000);
            },
            destroy: function () {

            },
            methods: {
                todos: function () {
                    return []
                },
                part: function (text) {
                    return text.split(' ')[0]
                },
                onAlert: function () {
                    alert('click')
                },
                onChangeClass: function () {
                    this.$data.isShow = false
                }
            }
        })
    </script>
</body>
</html><commit_msg>demo of watching parent binding for child component<commit_after><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <!-- if-repeat-component -->
        <z-if is="{!disabled}">
            <z-repeat items="{items}" xname="parent">
                <z-repeat items="{$value}" xname="child-repeat">
                    <my-component 
                        data-value="{$value}"
                        data-row="{$parent.$index}" 
                        data-col="{$index}"
                        data="{
                            items: childItems
                        }"
                        methods="{
                            onClick: onAlert
                        }"
                    ></my-component>
                </z-repeat>
            </z-repeat>
            <h1>switer</h1>
        </z-if>
        <z-repeat items="{todoItems}">
            <p></p>
        </z-repeat>

        <!-- component-state -->
        <my-component
            z-tap="{items}"
            data="{items: childItems}"
            methods="{onClick: onAlert}"
        ></my-component>

        <!-- local-component-ref -->
        <my-component2 ref="comp2"></my-component2>

        <!-- two way bindings -->
        <input type="text" z-model="inputs.text">
        <textarea z-model="inputs.text"></textarea>
        <select z-model="inputs.text">
            <option value="Please Input" checked>Please Input</option>
            <option value="hello">hello</option>
            <option value="world">world</option>
            <option value="renew">renew</option>
        </select>
        <input type="checkbox" z-model="inputs.check"> <span>is check: {inputs.check ? 'yes':'no'}</span> <br>
        <input type="date" z-model="inputs.date">{inputs.date} <br>
        <input type="range" z-model="inputs.range">{inputs.range} <br>
        <input type="color" z-model="inputs.color">{inputs.color} <br>
        <input type="tel" z-model="inputs.tel">{inputs.tel} <br>
        <input type="url" z-model="inputs.url">{inputs.url} <br>
        <input type="search" z-model="inputs.search">{inputs.search} <br>
        <!-- directives-filter -->
        <p 
            z-class="{show: isShow; hide: !isShow}" 
            z-attr="{disabled: isShow ? isShow : ''}" 
            z-on="{click: onChangeClass}"
        >{part(title)}</p>

        <p data-content="{contents.attr}">{- contents.text}</p>


    </div>
    <script src="../dist/zect.js"></script>
    <script>
        console.time('p')
        Zect.component('my-component', {
            template: '<z-template z-on="{click: onClick}" data-region="comp"><span>{subtitle}</span> <ul><z-repeat items="{items}"><li>{$value}</li></z-repeat></ul> </z-template>',
            data: {
                items: [],
                subtitle: 'sub title'
            },
            ready: function () {},
            methods: {

            }
        })

        var app = new Zect({
            el: '#app',
            components: {
                'my-component2': Zect.extend({
                    template: '<img z-attr="{src:\'http://www.baidu.com/img/bdlogo.png\'}" alt="" />'
                })
            },
            directives: {
                tap: {
                    bind: function () {
                        // console.log(this.$el)
                    }
                }
            },
            data: function () {
                return {
                    todoItems:[],
                    items: [[1]],
                    childItems: [1,2,3],
                    title: 'zect data-binding',
                    disabled: false,
                    isShow: true,
                    person: null,
                    a: undefined,
                    inputs: {
                        text: 'Please Input',
                        check: false,
                        date: '2014-10-11',
                        range: 1,
                        tel: '',
                        color: 'blue',
                        search: 'kw',
                        url: 'http://'
                    },
                    contents: {
                        text: '<h1>Rich html content</h1>',
                        attr: 'atrribute"</p><p>'
                    }
                }
            },
            computed: {
                length: {
                    deps: ['title'],
                    fn: function () {
                        return this.title.length
                    }
                }
            },
            ready: function () {
                console.timeEnd('p')
                setTimeout( function() {
                    this.$data.text = 'renew'
                    // this.$data.inputs.text = '<div>hello world</div>'
                    // this.$data.isShow = false
                    this.$data.childItems = [1,2]
                    this.$set('items', [[1, 2]])
                }.bind(this), 3000);
            },
            destroy: function () {

            },
            methods: {
                todos: function () {
                    return []
                },
                part: function (text) {
                    return text.split(' ')[0]
                },
                onAlert: function () {
                    alert('click')
                },
                onChangeClass: function () {
                    this.$data.isShow = false
                }
            }
        })
    </script>
</body>
</html>
{'fraction_non_alphanumeric': 0.1562585969738652, 'fraction_numerical': 0.005593764328289775, 'mean_word_length': 1.0573476702508962, 'pattern_counts': {'":': 0, '<': 175, '<?xml version=': 0, '>': 175, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1725653', 'n_tokens_mistral': 2990, 'n_tokens_neox': 2747, 'n_words': 505}