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。