jquery下的雙向綁定快速實現 way.js

way.js 不和vue.js同樣，vue操做是的是虛擬DOM，way直接操做實際DOM，於是直接用jquery的選擇器設置獲取值。

github上例子不少

//電商含運費成本計算器
<script type="text/javascript">
    $(function () {
        way.clear();//不須要存儲功能
        way.watchAll(function (selector, value) {//雙向綁定
            $('#result').text(function () {
                var strs = new Array();
                strs = $('#postage').val().split("+");
                return Math.round(parseFloat($('#prince').val()) + (Math.ceil($('#weight').val()) - 1) * parseFloat(strs[1])
                    + parseFloat(strs[0]) + parseFloat($('#gift').val()));
            });
         });       
    });
</script>

<form way-data="myForm" way-persistent="true" class="form-inline">

    <p>
        <span style=" font-size: 18px">進價</span><input type="text" name="prince" id="prince"
                                                       class="form-control input-lg"
                                                       style="width: 120px">&nbsp;
        <span style=" font-size: 18px">重量</span><input type="text" name="weight" id="weight"
                                                       class="form-control input-lg"
                                                       style="width: 120px">&nbsp;
        <span style=" font-size: 18px">郵費</span> <input type="text" name="postage" id="postage"
                                                        class="form-control input-lg" style="width: 140px">
    </p>
    <p>
        <span style=" font-size: 18px">贈品</span><input type="text" name="gift" id="gift" class="form-control input-lg"
                                                       style="width: 120px">&nbsp;
        <span style=" font-size: 18px">售價</span><input type="text" name="sale" id="sale" class="form-control input-lg"
                                                       style="width: 120px">
    </p>
</form>

<hr>
<p>
<p><span style="font-weight: bold; color: red;font-size: 24px">成本價：<span id="result"></span></span></p>