004.model视图模型

1.将update.html另存为model.html，在tpjs中<button>上添加@click="operate_click()"的点击事件，@是flyingon的事件标识符。

<button type="button" :text="txt2" @click="operate_click()"></button>

在fyjs的flyingon.view中添加creating: function

        var host=flyingon.view({
            host: 'container',
            template: '#template',
            defaults: {
                lay: 'vertical-line',
                pad: '10',
                txt1: '请在此输入',
                txt2: '点击'
            },
            creating: function (vm) {
                vm.operate_click = function (){
                    alert(1)
                }
            }
        });

浏览器打开click.html，点击按钮，弹出了对话框。

2.修改tpjs的label和TextBox，TextBox是flyingon标签，留意#model="val"让标签具有视图模型功能，label 的:text的值由变量该成了函数。

    <script type="text/x-template" id="template">
        <Panel :layout="lay" :padding="pad">
            <label :text="txt()"/>
            <TextBox :value="val" #model="val"/>
            <button type="button" :text="txt2" @click="operate_click()"></button>
        </Panel>
    </script>

修改fyjs，删掉defaults的txt1，修改creating中的内容，$get是flyingon方法，$是一个标识，与jquery无关

            defaults: {
                lay: 'vertical-line',
                pad: '10',
                txt2: '点击',
                val: '输入姓名'
            },
            creating: function (vm) {
                vm.txt=function(){
                    return vm.$get('val');//vm.val写法不追踪变化
                };
                vm.operate_click = function () {
                    vm.$set('val',vm.val)
                };
            }

在TextBox中输入字符，点击按钮或者空白位置点击，label的文字就绑定到了TextBox。