Mini MVVM Framework Avalonjs Learning Tutorial 8, property manipulation

A property operation is a large piece of DOM operations that includes the operation of the class name operation, the Value property operation of the form element, the management of the element's intrinsic properties, the management of the element's custom attributes, and some Boolean properties of some elements. In most cases, the value of an element property is a string type, which we call a string property, but some properties are Boolean, and there is a case of a numeric type, a node reference. The current jquery deals with them by doing a N hook object before settling them. Avalon in order to clean them. Also set n-Multiple bindings, where the class name is referred to ms-class, ms-hover, ms-active , and these other chapters describe The Value property of the form element is also said to be used ms-value, *ms-duplex*, and the remaining ms-checked, ms-selected, Ms-readonly, ms-disabled, ms-enabled, ms-value, ms-title, Ms-alt , ms-href, ms-src, ms-attr-☆ 11. The other first five bindings are Boolean attributes, the last five are string property bindings, and the final one is a common property binding. Later, however, with the discovery of techniques for determining intrinsic properties, they were eventually all implemented by ms-attr-☆.

In IE, the attribute needs to be differentiated, if it is an intrinsic attribute using elem[name] = value assignment; is a custom attribute , use Elem.setattribute directly (name, value) Standard browser is not so troublesome, all use Elem.setattribute (name, value), such as Elem.setattribute ("value", "XXX") will automatically sync to Elee.value = "xxx".

Here is its source code:

                       if (Boolmap[attrname]) {var bool = Boolmap[attrname] if (typ EOF Elem[bool] = = = "Boolean") {return Elem[bool] =!! Val//Handle Boolean property}} if (! && Propmap[attrname]) {//Legacy IE requires name mapping Attrname = Propmap[attrname] Var Isinnate = True} if (val = = = False) | | (val = = = null) | | (val = = = void 0) {return Elem.removeattribute (attrname)} if (window.                    VBArray &&!isinnate) {//ie need to differentiate between intrinsic properties and custom attributes//intrinsic properties and VML elements must be assigned using the Bracket method                    The SVG element must be assigned a value of 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)}

For more information about how to determine a custom attribute or intrinsic property, and its detailed derivation process, you can look at the tenth chapter of my book, JavaScript framework design.

<! DOCTYPE html>
Ms-enabled is the opposite side of ms-disabled, and it removes the disabled property based on whether the value of the expression is true.
Avalon's Ms-attr binding is incredibly powerful, and does not require the user to decide whether to use attr or prop methods, like jquery, using self-processing.
Mini MVVM Framework Avalonjs Learning Tutorial 8, property manipulation