avalon原来是mass Framework的一个子模块，v4之前是采用knockout那样笨重的属性变方法的方式实现依赖收集与通知变更。v4时突发奇想，然后Object

<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="au

avalon v4的早期实现 about avalon HOT 1 CLOSED

rubylouvre commented on July 16, 2024

avalon v4的早期实现

from avalon.

Comments (1)

RubyLouvre commented on July 16, 2024

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>scope</title>
        <style>
            .my-class{
                color: yellow;
                background:orange;
            }
            .your-class {
                line-height:3;
                width:200px;
                height:100px;
            }
            .his-class{
                text-indent:2em;
                font-size:14px;
            }
            .single{
                width:200px;
                height:100px;
                background:lightgreen;
            }
        </style>
    </head>
    <body>
        <p>First name: <input ms-model="firstName" /></p>
        <p>Last name: <input ms-model="lastName" ms-disabled='false' disabled='disabled' /></p>
        <h2>Hello, <input ms-event="change" ms-model="fullName">!</h2>
        <div>{{firstName +" | "+ lastName }}</div>

        <div>{{firstName | uppercase | aaa }}</div>
        <a href='{{2252}}/{{lastName}}' title='{{firstName}}'>这是链接</a>
        <div id="eee">Normal: {{1 + 8}}</div>
        <div ms-skip>Ignored: {{1 + 2}}</div>
        <hr/>
        <ul ms-each-el='array' id="array">
            <li>这是动态生成的{{el}}</li>
        </ul>
        <div ms-if="bool">sssss</div>
        <form name="myForm" >
            <input type="radio" ms-model="color" value="red">  <br/>
            <input type="radio" ms-model="color" value="green">  <br/>
            <input type="radio" ms-model="color" value="blue">  <br/>
            <input type="checkbox"  ms-model="vehicle" value="bike"><br>
            <input type="checkbox"  ms-model="vehicle" value="car"> <br>
            <input type="checkbox"  ms-model="vehicle" value="ship">
            <p> I have a {{vehicle}}</p>
            <tt>color = {{color}}</tt><br/>
        </form>
        <select ms-model="select">
            <option>
                test0
            </option>
            <option>
                test1
            </option>
            <option>
                test2
            </option>
        </select>{{select}}
        <div ms-class="{ 'my-class':true, 'your-class':true, 'his-class':true }">xxxxxxxxx</div>


        <script src="mass.js" type="text/javascript"></script>



        <script type="text/javascript">

            require("more/avalon2", function() {
            })
        </script>

    </body>
</html>