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。

?

?

?

總結

以上是生活随笔為你收集整理的004.model视图模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。