ミニMVVMフレームワークavalonjs学習チュートリアル8、属性操作
5670 ワード
属性操作はDOM操作の大きなブロックであり、クラス名操作、フォーム要素のvalue属性操作、要素固有属性の管理、要素カスタム属性の管理、一部の要素のブール属性の操作を含む.ほとんどの場合、要素属性の値は文字列タイプであり、文字列属性と呼ばれますが、ブール、数値タイプ、ノード参照の場合もあります.現在jQueryはそれらを処理してN個のフックのオブジェクトを作って、やっとそれらを平らにします.avalonそれらを片付けるためにNマルチバインディングも設定され、クラス名部分はms-class、ms-hover、ms-activeによって処理され、これらの他の章では紹介されている.フォーム要素のvalueプロパティは、ms-value、ms-duplexを使用できます.残りはms-checked、ms-selected、ms-readonly、ms-disabled、ms-enabled、ms-value、ms-title、ms-alt、ms-href、ms-src、ms-attr-☆11個.その他の最初の5つはブール属性バインド、後の5つは文字列属性バインド、最後の5つは汎用属性バインドです.しかしその後,固有属性をどのように判定するかの技術の発掘に伴い,それらは最終的にms−attr−☆によって実現された.
IEでは,固有属性であればelem[name]=valueを用いて属性を区別する必要がある.カスタム属性であるelemを直接使用する.setAttribute(name, value);標準ブラウザはそんなに面倒ではありません.すべてelemを使用します.例えばelem.setAttribute(「value」,「xxx」)はeleeに自動的に同期する.value = "xxx".
ソースコードは次のとおりです.
カスタム属性または固有属性の判定方法、およびその詳細な導出手順については、私の本『javascriptフレームワークデザイン』の第10章を参照してください.
ms-enabledはms-disabledの反対側であり、式の値が本当にdisabled属性を除去しているかどうかに基づいています.
avalonのms-attrバインドは非常に強力で、jQueryのようにユーザーがattrを使用するかpropを使用するかを判定する必要はなく、自己処理を使用します.
IEでは,固有属性であればelem[name]=valueを用いて属性を区別する必要がある.カスタム属性であるelemを直接使用する.setAttribute(name, value);標準ブラウザはそんなに面倒ではありません.すべてelemを使用します.例えばelem.setAttribute(「value」,「xxx」)はeleeに自動的に同期する.value = "xxx".
ソースコードは次のとおりです.
if (boolMap[attrName]) {
var bool = boolMap[attrName]
if (typeof elem[bool] === "boolean") {
return elem[bool] = !!val //
}
}
if (!W3C && propMap[attrName]) {// IE
attrName = propMap[attrName]
var isInnate = true
}
if (val === false) || (val === null) || (val === void 0) {
return elem.removeAttribute(attrName)
}
if (window.VBArray && !isInnate) {
//IE
// VML
//SVG setAttribute
if (isVML(elem)) {
isInnate = true
} else if(window.SVGElement && !(elem instanceof SVGElement)) {
var attrs = elem.attributes || {}
var attr = attrs[attrName]
isInnate = attr ? attr.expando === false : attr === null
}
}
if (isInnate) {
elem[attrName] = val
} else {
elem.setAttribute(attrName, val)
}
カスタム属性または固有属性の判定方法、およびその詳細な導出手順については、私の本『javascriptフレームワークデザイン』の第10章を参照してください.
<!DOCTYPE html>
<html>
<head>
<title>ms-attr-*</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js"></script>
<script>
avalon.define("ms-attr-*", function(vm) {
vm.aaa = true
vm.click = function() {
vm.aaa = !vm.aaa
}
vm.bbb = "@@@"
vm.ccc = "&&&"
vm.active = "active"
})
</script>
<style>
.active {
background: goldenrod;
}
.readonly{
border:1px solid blueviolet;
}
</style>
</head>
<body>
<form method="get" action="aaa.html" ms-controller="ms-attr-*">
<input ms-enabled="aaa" name="a1" value="12345"/>
<input ms-disabled="aaa" name="a2" value="67890"/>
<input ms-readonly="aaa" name="a3" ms-class="readonly: aaa" value="readonly" />
<input ms-checked="aaa" type="checkbox" value="checkbox" name="a4"/>
<select name="a5">
<option>222</option>
<option ms-selected="aaa">555</option>
</select>
<p>
<input ms-attr-value=" {{ccc}}" name="a6" value=" "/>
<input ms-attr-value="' '+ccc" name="a7" value=" " />
<input ms-value=" {{ccc}}" name="a8" value=" "/>
</p>
<button type="button" ms-click="click" ms-attr-class="active">
</button>
<input type="submit" value=" " />
<svg width="100" height="100">
<circle ms-attr-cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</form>
</body>
</html>
ms-enabledはms-disabledの反対側であり、式の値が本当にdisabled属性を除去しているかどうかに基づいています.
avalonのms-attrバインドは非常に強力で、jQueryのようにユーザーがattrを使用するかpropを使用するかを判定する必要はなく、自己処理を使用します.