Maison > Article > interface Web > Comment exprimer intuitivement le principe mvvm avec du code

Comment exprimer intuitivement le principe mvvm avec du code

php中世界最好的语言original: 2018-03-12 17:10:321374parcourir

Cette fois je vais vous montrer comment utiliser le code pour exprimer intuitivement le principe mvvm, et quelles sont les précautions pour exprimer le principe mvvm en code Ce qui suit est un cas pratique, jetons un coup d'œil. .

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <div itcast-controller="myController">
        <input type="text" itcast-value="title">
        <h1 itcast-cont="title"></h1>
    </div>
    <script>
        var model = {            title:&#39;我是标题&#39;,            setTitle:function(title){                this.title = title;
                flush();
            }
        };        function flush(){            //选择出来范围
            var itcastScope = document.querySelector(&#39;[itcast-controller]&#39;);            
            //选择所有绑定了的元素
            var itcastValueArr = document.querySelectorAll(&#39;[itcast-value]&#39;);            var itcastContArr = document.querySelectorAll(&#39;[itcast-cont]&#39;);            for(var i=0;i<itcastValueArr.length;i++){
                itcastValueArr[i].value = model[itcastValueArr[i].getAttribute("itcast-value")];
                itcastValueArr[i].oninput = function(){
                    model.setTitle(this.value);
                };
            }            for(var i=0;i<itcastValueArr.length;i++){
                itcastContArr[i].innerHTML = model[itcastContArr[i].getAttribute("itcast-cont")];
            }
        }
        
        flush();    </script></body></html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention au site Web php chinois Autres articles connexes !

Lecture recommandée :

Le principe d'exécution du code Node.js

Le concept d'utilisation de portées indépendantes en angulaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment le code Node.js s'exécuteArticle suivant：Comment le code Node.js s'exécute

Articles Liés

Voir plus