前后台json数据绑定——way.JS

• 依赖于JQ
• 01_页面值-页面值绑定.html
• 02_List绑定多个相同模型.html
• 0201_先set,再DOm添加。再get.html
• 03_绑定多个不同模型.html
• 04_继承03用类.方法名的形式.html
• 05_返回给定的DOM元素的范围.html
• 06_大写小写反写主要英文.html
• 07_List绑定多个模型-删除部分模型.html
• 09_01_DOM方法.html
• 09_02_data方法.html
• 09_03_localStorage方法.html
• 09_04_Bind方法.html
• 09_05_其他方法.html

JQ.js    way.js

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/way.js"></script>
    <script src="../Scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
    <form way-data="myFormData" way-persistent="true">
        <input type="text" name="name">
        <input type="text" name="age">
        <input type="text" name="gender">
    </form>

    Name: <span way-data="myFormData.name"></span>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>重复一个DOM元素的值可以遍历的方式。js的传递数据。</title>
    <script src="../Scripts/way.js"></script>
    <script src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            way.set("some.list", [
                { name: "Pierre", age: 23, phone: "13390907878" },
                { name: "Paul", age: 24, phone: "13390907878" },
                { name: "Jacques", age: 25, phone: "13390907878" }
            ]);
        });
    </script>

</head>
<body>
    <form>
        <div>自己的div</div>
        <div way-repeat="some.list">
            <span way-data="name"></span>
            <span way-data="age"></span>
            <span way-data="phone"></span>
        </div>

        <!-- 使用下面的展现方式， 可以直接使用 way-scope=[] 类似下标的去访问。
           <div way-scope="some.list">
  <div way-scope="0">
    0 - <span way-data="name">Pierre</span>
  </div>
  <div way-scope="1">
    1 - <span way-data="name">Paul</span>
  </div>
  <div way-scope="2">
    2 - <span way-data="name">Jacques</span>
  </div>
</div>
           -->
    </form>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>重复一个DOM元素的值可以遍历的方式。js的传递数据。</title>
    <script src="../Scripts/way.js"></script>
    <script src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            way.set("some.list", [
                { name: "Pierre", age: 23, phone: "13390907878" },
                { name: "Paul", age: 24, phone: "13390907878" },
                { name: "Jacques", age: 25, phone: "13390907878" }
            ]);

        });
        function diannimei() {
            var html = '';
            html = "<div way-scope='1'><span way-data=name'>关亚君</span><span way-data='age'>25</span><span way-data='phone'>18330908989</span></div>";
            $(".nidaye").append(html);
        }
    </script>

</head>
<body>
    <form>
        <div>自己的div</div>
        <div class="nidaye" way-repeat="some.list">
            <span way-data="name"></span>
            <span way-data="age"></span>
            <span way-data="phone"></span>
        </div>
        <a href="#" onclick="diannimei()">点点</a>
        <!-- 使用下面的展现方式， 可以直接使用 way-scope=[] 类似下标的去访问。
           <div way-scope="some.list">
  <div way-scope="0">
    0 - <span way-data="name">Pierre</span>
  </div>
  <div way-scope="1">
    1 - <span way-data="name">Paul</span>
  </div>
  <div way-scope="2">
    2 - <span way-data="name">Jacques</span>
  </div>
</div>
           -->
    </form>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>[way-scope] attribute</title>
    <script src="../Scripts/way.js"></script>
    <script src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            way.set("someScope", { with: { something: "hello", name: "张三", age: "23", note: "测试" }, nation: { where: "中国", Address: "北京" } })
        });
    </script>
</head>
<body>
    <div way-scope="someScope">
        <div way-scope="with">
            <div way-data="something"></div>
            <div way-data="name"></div>
            <div way-data="note"></div>
            <!-- Will render "hello" -->
        </div>
        <div way-scope="nation">
            <div way-data="where"></div>
            <div way-data="Address"></div>
            <!-- Will render "hello" -->
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>[way-scope-break] attribute</title>
    <script src="../Scripts/way.js"></script>
    <script src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            way.set("someScope", { with: { something: "hello" } })
        });
    </script>
</head>
<body>
    <div way-scope="someScope">
        <div way-scope-break="true">
            <div way-data="someScope.with.something"></div>
            <!-- Will render "hello" -->
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/way.js"></script>
    <script src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var dd = way.dom("#someDIV").scope();
            alert(dd);
            //someScope.with
        });
    </script>
</head>
<body>
    <div way-scope="someScope">
        <div way-scope="with">
            <div way-data="something" id="someDIV"></div>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/way.js"></script>
    <script src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            way.set("someData", "hello")
        });
    </script>
    <style type="text/css">
        tr td {
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div way-data="someData" way-transform="uppercase"></div>
    <table style="border: 2px solid red;" >
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>uppercase</td>
                <td>Sets a string to uppercase</td>
                <td>"hello" becomes "HELLO"</td>
            </tr>
            <tr>
                <td>lowercase</td>
                <td>Sets a string to lowercase</td>
                <td>"HELLO" becomes "hello"</td>
            </tr>
            <tr>
                <td>reverse</td>
                <td>Reverses a string</td>
                <td>"hello" becomes "olleh"</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>移出部分模型，展现。</title>
    <script src="../Scripts/way.js"></script>
    <script src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            way.set("some.list", ["I", "am", "list"]);
        });
    </script>
</head>
<body>
    <div way-data="some.list.0"></div>
    <!--<div id="clickToRemove" way-action-remove="some.list.2"></div>
    <div id="clickToPush" way-action-push="some.list"></div>-->
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/way.js"></script>
    <script src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {

            //1.way.dom(element).toStorage(options)        Stores the element's value to the in-store memory.
            way.dom("#someForm").toStorage()

            //2.way.dom(element).fromStorage(options)     Sets the element's value from the stored one.设置从存储一个元素的值。
            way.dom("#someForm").fromStorage()

            //3.way.dom(element).toJSON(options)          返回一个JSON解析数据的
            way.dom("#someForm").toJSON()

            //4.way.dom(element).fromJSON(data, options)  设置元素的值从任何数据(json)。
            way.dom("#someForm").fromJSON({ name: "John Doe" })

            //5.way.dom(element).getValue()               返回一个JSON结构,其中包含DOM元素的值。
            way.dom("#someForm").getValue()

            //6.way.dom(element).setValue(value, options) 设置元素的值从任何数据(json)。
            way.dom("#someForm").setValue({ name: "John Doe" })

            //7.way.dom(element).setDefault(force)      设置一个元素的默认值。默认情况下,只有DOM元素的值设置为默认值。其绑定值在数据存储不变。通过[force]参数如果你需要强制设置内存值数据元素的默认值。
            way.dom("#someForm").setDefault()

            //8.way.setDefaults(force)                  设置所有绑定DOM元素的默认值。
            way.setDefaults()

            //9.way.dom(element).getOptions()           返回 the list of the ["way-"] 选择标记DOM元素。
            way.dom("#someForm").getOptions()

        });
    </script>
</head>
<body>
    way.dom(element).toStorage(options)
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Data methods</title>
    <script src="../Scripts/way.js"></script>
    <script src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            way.set("some.path", "bonjour!");

            //1.way.get(selector) 返回值的数据储存在一个给定的路径名。
            way.get("some.path");
            // "bonjour"

            //2.way.set(selector, value, options)保存的数据在内存中指定的路径名。
            way.set("some.path", "bonjour!");

            //3.way.remove(selector, options) 删除的数据存储在一个给定的路径名。
            way.remove("some.path");
            way.get("some.path");
            // undefined

            //4.way.clear(options)  清除所有的数据。
            way.clear();
            way.get();
            // {}
        });
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/way.js"></script>
    <script src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {

            //1.way.backup() 保存在方式存储数据。js localStorage的数据存储。
            way.backup();

            //2.way.restore() Restores the data saved in localStorage. Called on $(document).ready by default (can be changed with global options).恢复的数据保存在本地文件。呼吁美元(文档)。准备在默认情况下(与全球选项可以改变)。
            way.restore();

        });
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/way.js"></script>
    <script src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {

            //1.way.registerBindings()
            //Triggers a scan of the DOM to find and save the elements with the [way-data] attribute, that will be bound with some data.
            //触发扫描的DOM找到并保存(数据)的元素属性,用一些数据。
            way.registerBindings()

            //2.way.updateBindings(selector)
            //Sets the value of all the DOM elements binded to a data selector with their values in way.js' datastore. If omitted, all (excluding write-only's and omitted) DOM elements with a "way-data=" attribute will be refreshed.
            //集所有DOM元素的值绑定到数据选择器的方式与他们的价值观。js的数据存储。如果省略,所有(不含只写和省略)DOM元素与“数据= "属性将刷新。
            way.updateBindings("formData.name")

        });
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/way.js"></script>
    <script src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //一、Repeat methods
            //1.way.registerRepeats()
            //Triggers a scan of the DOM to find and save the elements with the [way-repeat] attribute, that will be bound with some data.
            //触发扫描的DOM找到并保存(way-repeat)的元素属性,用一些数据。
            way.registerRepeats()

            //2.way.updateRepeats(selector)
            //Triggers a refresh of the repeat elements with their respective data.
            //触发器的刷新重复元素与各自的数据。
            way.updateRepeats("somethingToBeLooped")

            //二、Watcher methods
            //1.way.watch(selector, callback[value])
            //给定值的变化。
            way.watch("some.data", function (value) {
                console.log("Data has been updated to value: " + value);
            });

            //2.way.watchAll(callback[selector, value])
            //Watches all changes in way.js' datastore.

            way.watchAll(function (selector, value) {
                console.log("The data " + selector + " has been changed.", value);
            });
        });
    </script>
</head>
<body>
</body>
</html>