Mini MVVM Framework AVALONJS Tutorial 6, insert removal processing

Ms-if is one of the process bindings that, if the expression is true, prints the current element out of the page, rather than moving it out of the DOM tree. Its effect looks similar to the ms-visible effect in the previous section, but it affects: empty pseudo-class, and can be more economical performance. MS-IF also has a branch, called Ms-if-loop, which is used in conjunction with the ms-repeat binding, so say it later.

We can compare the two with the following example:

<! DOCTYPE html>
The implementation of MS-IF is much more complex than ms-visible, and if it is initially scanned to this element and evaluates to FALSE, it will no longer scan the elements inside, and immediately remove this element. This is the key to better performance than ms-visible. To be able to find the correct location when re-inserting the DOM, Avalon has to create a note node to do the signpost. The removed element is placed in a div called ifsanctuary, which facilitates unified management.
"If": function (data, vmodels) {//This is the first time the execution of a scan is var elem = data.element Elem.removeattribute (data.name) if (!data . placehoder) {data.msindocument = Data.placehoder = Doc.createcomment ("Ms-if")} data.vmodels = Vmodels p  Arseexprproxy (Data.value, Vmodels, data)}, "If": Function (val, elem, data) {//This is the execution var viewmodel each time the Placehoder corresponding property is changed) Data.placehoder if (val) {//Insert back DOM tree if (!data.msindocument) {data.msindocument = True if        (Placehoder.parentnode) Placehoder.parentNode.replaceChild (Elem, Placehoder)}}        if (Rbind.test (Elem.outerHTML.replace (RLT, "<"). Replace (RGT, ">"))) {scanattr (Elem, Data.vmodels) }} else {//move out of the DOM tree, put into the ifsanctuary Div, and occupy the original position with the annotation node if (data.msindocument) {data.msindocument = Fals E if (elem.parentnode) elem.parentNode.replaceChild (Placehoder, elem)} pl    Acehoder.elem = Elem        Ifsanctuary.appendchild (Elem)}}, 
 Finally, let's end this chapter with a switch-card example. 
<! DOCTYPE html>
Mini MVVM Framework AVALONJS Tutorial 6, insert removal processing