So drücken Sie das MVVM-Prinzip intuitiv mit Code aus-js-Tutorial-php.cn

So drücken Sie das MVVM-Prinzip intuitiv mit Code aus

php中世界最好的语言

Freigeben： 2018-03-12 17:10:32

Original

1456 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie Code verwenden, um das MVVM-Prinzip intuitiv auszudrücken, und welche Vorsichtsmaßnahmen es gibt, um das MVVM-Prinzip im Code auszudrücken. Das Folgende ist ein praktischer Fall, schauen wir uns das an .

<!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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website Andere verwandte Artikel!

Empfohlene Lektüre:

Das Ausführungsprinzip des Node.js-Codes

Das Konzept der Verwendung unabhängiger Bereiche in Angular

Das obige ist der detaillierte Inhalt vonSo drücken Sie das MVVM-Prinzip intuitiv mit Code aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!