Home >Web Front-end >JS Tutorial >How to express mvvm principle intuitively with code

How to express mvvm principle intuitively with code

php中世界最好的语言Original: 2018-03-12 17:10:321476browse

This time I will show you how to use code to intuitively express the mvvm principle, and how to use code to express the mvvm principle. What are the precautions?The following is a practical case, let's take a look.

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!

How to express mvvm principle intuitively with code

Related articles