mvvm の原理をコードで直感的に表現する方法-jsチュートリアル-php.cn

mvvm の原理をコードで直感的に表現する方法

php中世界最好的语言

リリース： 2018-03-12 17:10:32

オリジナル

1456 人が閲覧しました

今回は、mvvm 原則を直感的に表現するためのコードの使用方法と、mvvm 原則をコードで表現する際の注意事項について説明します。以下は実際的なケースです。見てみましょう。

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

ログイン後にコピー

この記事の事例を読んだ後、あなたはその方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイト

その他の関連記事に注目してください。

推奨読書:

Node.jsコードの実行原理

角度独立スコープの使用の概念

以上がmvvm の原理をコードで直感的に表現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。