jQuery TwoWay数据绑定

如何在jQuery中实现简单的双向数据绑定？ 像knockoutJS这样的东西，但是最简单的forms。

场景 – 将JSON对象绑定到表行（每个字段都是td> input /> / td> ）。

有什么建议？

Answer 1

我的尝试 – HTML

       Get Set       

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 = $(''); for (var k = 0; k < _fieldListLength; k++) { headerRow.append($('', { text: _fieldList[k].toUpperCase() })); } _$table.find('thead').append(headerRow); for (var i = 0; i < _objectListLength; i++) { var objectData = _objectList[i], currentRow = $(''); currentRow.data('source', objectData.element); rowList.push(currentRow); for (var j = 0; j < _fieldListLength; j++) { var field = _fieldList[j], $inputElement = $('', { type: 'text', value: objectData.element[field] }); $inputElement.data('field', field); objectData.input[field] = $inputElement; currentRow.append($('').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 。 Watch.js如何工作？

Watch.js现在使用Object.observe

这是另一个JavaScript中的Easy Two-Way数据绑定示例。

另一个问题。

原生JavaScript数据绑定 。

Answer 2

这个解决方案非常简单，可以扩展为具有更复杂的function： http ： //cssshowcase.co.uk/two-way-data-binding-with-jquery/

它实际上将2个或更多HTML元素绑定在一起，使用它的当前forms，它会更改任何元素的内部html以及任何输入的值，对于包含相同“bind”属性值的每个元素。