How to express mvvm principle intuitively with code-JS Tutorial-php.cn

How to express mvvm principle intuitively with code

php中世界最好的语言

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

Original

1364 people have browsed it

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>

Copy after login

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!