ArticleDirectory
- Static methods and attributes
- Mini jquery object
- Various bindings
- Viewmodel
To facilitate the compilation of controls, this upgrade integrates a mini three hundred-line mini jquery. The main updates are as follows:
- Add powerful UI binding and custom scanning functions, so that you do not need to write a line of js to generate the UI. The format of UI binding is MS-ui-opts? = Uiname. Opts is the object name in the VM, and uiname is the control name. The UI will automatically find the value of data-ID as the viewmodel ID, and then you can get it in aveon. Models [ID. The UI control uses the value of data-* as the UI configuration item first. The design is basically the same as that of Bootstrap.
- The MS-controller binding function is the same as the NG-controller function of angular. It specifies that a viewmodel is responsible for a certain area. If no viewmodel is found, the viewmodel above it is defined. See this document.
- MS-important binding, specifying a regionOnly one viewmodel is responsible, Stop scanning.
- The MS-options function is greatly enhanced.
- Mini version of jquery.
At the request of some people, let's list the API
Static methods and attributes
- Mix (a, B), equivalent to jquery. Extend
- Models, used to place the generated viewmodel
- Log (s), print logs
- Error (s), throwing an exception
- UI, used to place Components
- Ready (FN), domready. The callback is delayed until the DOM tree is executed.
- Oneobject (STR | array, Val ?), If a string is input, it is converted into a String Array Using a comma. Otherwise, the string array must be passed. The second parameter is optional and is the value of the generated object. This method is used to generate an object with different key names but the same key value. For example, {A: 1, B: 1, C: 1, D: 1}
- Type (OBJ): the data type of the input parameter. The value may be array, date, object, JSON, number, String, null, undefined.
- Range (START, end, step) to generate an integer array, which is consistent with the functions of underscorejs or Python with the same name.
- BIND (El, type, FN, phase), bind event, return a callback to unmount your row
- Unbind (El, type, FN, phase), uninstall event
- Foreach, with the same function as jquery. Each, is the index value or key name before, value or element after
- Define (ID ?, Deps ?, Factory), define a viewmodel
- Scan (element ?, Viewmodel ?), Start to scan the DOM tree and extract bindings.
Mini jquery object
You must input an element node, document object, or window. You can use $ (). element, $ () [0] to access your input items again. It has the following prototype methods.
- Hasclass (CLS) to determine whether such a name exists
- Addclass (CLS). This class name is added only when the element does not exist.
- Remvoeclass (CLS), remove the class name
- Toggleclass (CLS, state ?), Switch the class name. If the 2nd parameter is a cloth name, forcibly add or delete the class name based on it.
- ATTR (name, value ?), Read/write features (this method is very weak and is implemented using setattribute and getattribute directly without any compatibility processing)
- Data (name, value ?), Read and Write data using the HTML5 data-* feature. It will parse and make the data more practical. The idea is the same as jquery.
- Removedata (name), remove data
- CSS (name, value ?), Read/write styles. This compatibility is very good, because up to one hundred lines can be added to the private prefix of HTML5.
- Width (Val ?), Read/write width. Note that the hidden elements are not processed.
- Height (Val ?), Read/write height. Do not process hidden elements.
- BIND (type, FN, phase), bind event, this does not perform a chain operation, the purpose is to return the callback to uninstall you.
- Unbind (type, FN, phase), uninstall the event.
- VAL: reads the value of the form element. The function is the same as that of jquery.
- Offset to get the coordinates of elements in the document. The function only achieves half of jquery and can only be read and cannot be written.
Various bindings
-
- MS-html = "str", add html
-
- MS-class-xxx = "Boolean", switch Class Name
-
- MS-Hover = "classname". This type of name is added when it is moved up.
-
- MS-visible = "Boolean", the style. Display of the Operation element is displayed and hidden.
- MS-If = "Boolean", determines whether to release this element to the DOM tree or remove it
-
- MS-each-el? = "Array", El is used for the following reference. If this parameter is left blank, the default value is $ data. In the scope of its function, you can also access $ index to get its index value, $ first to determine whether it is the first element, $ last is the last one, and $ remove is a method, when you execute it, it will delete it from the array and remove all the elements that it applies from the DOM tree.
-
- MS-model = "property", which can only be used for form elements. It is bound to some fields in viewmodel in two directions and will secretly bind some events for synchronization. The situation is the same as that of angular ng-model.
-
- MS-controller = "viewmodelname", specifying the scope of a viewmodel
-
- MS-important = "viewmodelname": specifies that this area can only be rendered by this viewmodel.
-
- MS-Skip, which does not scan and bind this element and its descendants to ensure the original output.
-
- MS-on-type = "Callback": bind an event. type indicates the event name, for example, MS-on-click = "tick ".
-
- MS-click = "Callback", MS-keypress = "Callback", MS-keydown = "Callback ",
MS-keyup = "Callback", MS-mousedown = "Callback "...... And other common events have made a shortcut.
-
- Boolean attributes such as MS-disabled, MS-readyonly, MS-selected, and MS-checked are added and removed based on the attribute values.
-
- MS-Enabled = "Boolean", opposite to MS-disabled.
- {Expr}, interpolation expression, which is the same as angular. You can add multiple filters in the form of "| filter (args1, args2.
-
- MS-ui-opts? = "Name" to generate a UI control. Opts is an object attribute in viewmodel, and name is the control name.
Viewmodel
- Consistent with angular requirements, $ starts with the framework reserved, because in the IE6-8 and then vbs implementation, cannot be case sensitive, do not define two similar method names for the same viewmodel.
- $ ID is the name of viewmodle
- $ Events is an object used to save the callback of the $ watch method.
- $ Watch (prop, callback), viewmodel can only notify its view to update, but cannot notify him of other attributes in viewmodel. For monitoring attributes, we may use this method to implement inter-sibling communication.
- $ Watch (prop, callback ?), Stop notification
- The framework does not convert an attribute starting with $ to a monitoring attribute.
- Attribute names placed in $ skiparray are not converted to monitoring attributes.
- An object containing get and set is considered as a computing attribute.
- The array is converted to a monitoring array, which only monitors the changes caused by the length and order.
You can download it or watch the example here.
The two newly added controls are all changed from the jquery plug-in. One is changed from 250 rows to 130 rows, and the other is changed from 800 rows to 200 rows. The power of mvvm is highlighted!
Note that Ms-controller or MS-important must be specified in V5!
