碼上快樂

相關內容    簡體    繁體

前后台json數據綁定——way.JS

本文轉載自   查看原文   2016-08-05 14:40   6920 
  • 依賴於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>

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 way.js - 輕量級、持久化的雙向綁定JS庫 js實現數據綁定 WPF 界面與后台雙向數據綁定 通過 Ajax 調取后台接口將返回的 json 數據綁定在頁面上 用純JS實現雙向數據綁定 JS數據綁定模板artTemplate試用 Js原生 雙向數據綁定 Vue.js_數據綁定 WPF后台代碼實現數據綁定和布局 【實用代碼片段】將json數據綁定到html元素 （轉）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM