avalonjs 學習筆記1---checkbox
一、vscode 安裝使用
1.vs code+node.js下載安裝
2.在node.js command prompt 中運行 npm install -g live-server
3.可以使用vscode了
二、avalonjs中checkbox使用
html:
<tr ms-for="a in checkItems"> <td ms-if="a.isFinish==true"><input type="checkbox" ms-duplex-checked="true" data-duplex-changed="@checkboxChange($event,a.id,a.name)" /></td> <td ms-if="a.isFinish==false"><input type="checkbox" ms-duplex-checked="false" data-duplex-changed="@checkboxChange($event,a.id,a.name)" /></td> <td>{{a.name}}</td> </tr> <tr> <td colspan="2">進度:<img id="wid" ms-css="{background:‘url([email protected]}, avalonjs: checkbox全選中和不全選中 html:
<table ms-controller=" duplex1" border="1">
<tr>
<td><input type="checkbox" ms-duplex-checked="@allchecked" data-duplex-changed="@checkAll"/>全選</td>
</tr>
<tr ms-for="($index, el) in @data">
<td><input type="checkbox" ms-duplex-checked="el.checked" data-duplex-changed="@checkOne" />{{$index}}::{{el.checked}}</td>
</tr>
</table>
js:
var vm = avalon.define({
$id: "duplex1",
data: [{checked: false}, {checked: false}, {checked: false}],
allchecked: false,
checkAll: function (e) {//全選改變,則每一個都改變成和全選一樣的,用forEach循環改變
var checked = e.target.checked;
vm.data.forEach(function (el) {
el.checked = checked
})
},
checkOne: function (e) {//每一個改變,若沒選中,則全選是false,即沒選中;若選中,判斷其他每一個是否都選中,若選中,則全選是true
var checked = e.target.checked
if (checked === false) {
vm.allchecked = false
} else {//avalon已經為數組添加了ecma262v5的一些新方法
vm.allchecked = vm.data.every(function (el) {//every 判斷數組是否滿足條件,如果滿足,返回true,
如果不滿足,返回false,
不繼續尋找
return el.checked
})
}
}
})
avalonjs 學習筆記1---checkbox