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>