jQuery双向数据绑定

uinbv5nw 于 2023-05-17 发布在 jQuery

关注(0)|答案(3)|浏览(168)

如何在jQuery中实现简单的双向数据绑定？类似于knockoutJS，但形式尽可能简单。
场景-将JSON对象绑定到表行（每个字段为td>input/>/td>）。
有什么建议吗？

jquery

来源：https://stackoverflow.com/questions/15309910/jquery-twoway-data-binding

3条答案

按热度按时间

dgenwo3n1#

我的尝试- HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Data Binding</title>
</head>
<body>
    <table id="content-table">
        <thead>
        </thead>
        <tbody></tbody>
    </table>
    <button id="get-data">Get</button>
    <button id="set-data">Set</button>

    <script src="../js/vendor/jquery-1.9.1.js"></script>
    <script src="../js/vendor/jquery-migrate-1.1.1.js"></script>
    <script src="../js/vendor/watch.js"></script>
    <script src="../js/dataBinder.js"></script>
</body>
</html>

JavaScript

var DataBinder = (function ($) {

    var _$table = null,
        _objectList = [],
        _fieldList = [],
        _objectListLength = -1,
        _fieldListLength = -1;

    /* AJAX call or smth. */
    var _loadData = function () {
        var fakeData = [{
            name: 'John',
            surname: 'Doe'
        }, {
            name: 'Foo',
            surname: 'Bar'
        }];

        _objectList = $.map(fakeData, function (element, index) {
            var elementObject = {
                _dataBinderId: index,
                element: element,
                input: {}
            };

            watch(elementObject.element, function (property, action, newValue) {
                _setValue.call(elementObject, property, newValue);
            });

            return elementObject;
        });

        _objectListLength = _objectList.length;
    };

    var _getFields = function () {
        for (var i = 0; i < _objectListLength; i++) {
            for (var field in _objectList[i].element) {
                if (!!!~$.inArray(field, _fieldList)) {
                    _fieldList.push(field);
                }
            }
        }

        _fieldListLength = _fieldList.length;
    };

    var _setValue = function (field, value) {
        this.input[field].val(value);
    };

    var _bindEvents = function () {
        $('#get-data').on('click', function () {
            alert(JSON.stringify(_getRowData()));
        });

        $('#set-data').on('click', function () {
            _objectList[0].element.name = 'PIPA';
            _objectList[1].element.surname = 'BLAAAAAAH';
        });

        _$table.on('keyup', 'input', function () {
            var $this = $(this), field = $this.data('field'), source = $this.closest('tr').data('source');
            source[field] = $this.val();
        });
    };

    var _getRowData = function () {
        var elements = [];

        $.each(_objectList, function () {
            elements.push(this.element);
        });

        return elements;
    };

    var _generateEditableElements = function () {
        var rowList = [], headerRow = $('<tr>');

        for (var k = 0; k < _fieldListLength; k++) {
            headerRow.append($('<th>', {
                text: _fieldList[k].toUpperCase()
            }));
        }
        _$table.find('thead').append(headerRow);

        for (var i = 0; i < _objectListLength; i++) {
            var objectData = _objectList[i], currentRow = $('<tr>');

            currentRow.data('source', objectData.element);
            rowList.push(currentRow);

            for (var j = 0; j < _fieldListLength; j++) {
                var field = _fieldList[j], $inputElement = $('<input>', {
                    type: 'text',
                    value: objectData.element[field]
                });

                $inputElement.data('field', field);
                objectData.input[field] = $inputElement;

                currentRow.append($('<td>').append($inputElement));
            }
        }

        _$table.find('tbody').append(rowList);
    };

    var init = function ($table) {
        _$table = $table;

        _loadData();
        _getFields();

        _generateEditableElements();
        _bindEvents();
    };

    return {
        init: init
    };

})(jQuery);

DataBinder.init($("#content-table"));

我用了很棒的Watch.JS。How Does Watch.js Work?
Watch.js now uses Object.observe
下面是另一个例子Easy Two-Way Data Binding in JavaScript。
另一个question.
Native JavaScript Data-Binding。

赞(0）回复(0）举报 2023-05-17

hwamh0ep2#

这个解决方案非常简单，可以扩展为更复杂的功能：http://cssshowcase.co.uk/two-way-data-binding-with-jquery/
它实际上将两个或更多的HTML元素绑定在一起，对于每个拥有相同“bind”属性值的元素，它的当前形式会改变任何元素的内部html和任何输入的值。

赞(0）回复(0）举报 2023-05-17

4smxwvx53#

下面这段jQuery代码看起来像是angularJs中的双向绑定

<script purpose="Setting value for total cost">
    $(document).ready(()=>{ 
        var sumTotalCost = () => {
            var val1 = +$("#base_salary").val();
            var val2 = +$("#on_cost").val();
            $("#total_cost").val(val1 + val2);
        }
        $(".sumtotal-elements").keyup(function () {
            sumTotalCost()
        });
    })
</script>

<input class="form-control sumtotal-elements" type="text" name='base_salary'id="base_salary">

<input class="form-control sumtotal-elements" type="text" name='on_cost' id="on_cost">

<input class="form-control" type="text" name='total' id="total_cost" >

赞(0）回复(0）举报 2023-05-17

我来回答

jQuery双向数据绑定

3条答案

相关问题

热门标签

最新问答