jQuery दोवे डेटा बाध्यकारी

आप jQuery में एक सरल दो-तरफा डेटा बाध्यकारी कैसे कार्यान्वित करते हैं? कुछ नॉकआउट जेएस की तरह, लेकिन सबसे सरल संभव रूप में।jQuery दोवे डेटा बाध्यकारी

परिदृश्य - तालिका पंक्ति पर JSON ऑब्जेक्ट को बांधें (प्रत्येक फ़ील्ड td> इनपुट />/td>) है।

कोई सुझाव?

स्रोत

2013-03-09 kayz1

आपको एक और विशिष्ट उदाहरण देना चाहिए और कुछ प्रयास करना चाहिए। – soyuka

मैंने किया। अपना खुद का जवाब देखें। कोई सुझाव, चालें? – kayz1

http://jquerymy.com/ –

मेरे कोशिश - एचटीएमएल

<!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>

जावास्क्रिप्ट

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"));

Result

मैं अद्भुत 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।

स्रोत

2013-03-09 17:07:20 kayz1

Watch.JS अच्छा लग रहा है, लेकिन यह आवधिक जांच के लिए setInterval का उपयोग करता है। यह प्रदर्शन के लिए अच्छा नहीं हो सकता है ... –

अब यह मौजूद होने पर Object.observe का उपयोग करता है। – kayz1

बहुत बढ़िया! मैं इस नई सुविधा के प्रकाश में Watch.js का परीक्षण करने की उम्मीद कर रहा हूं! –

यह समाधान बहुत सरल है, और यह एक अधिक जटिल कार्यक्षमता को बढ़ाया जा सकता है: http://cssshowcase.co.uk/two-way-data-binding-with-jquery/

यह सचमुच 2 या अधिक HTML तत्वों को एक साथ बांधता है, के साथ मौजूदा रूप में यह किसी भी तत्व के भीतर एचटीएमएल बदल जाता है और प्रत्येक तत्व के लिए भी, किसी भी इनपुट का मूल्य जो "बाध्य" विशेषता मान रखता है।

स्रोत

2017-02-25 21:29:55

jQuery दोवे डेटा बाध्यकारी

उत्तर

संबंधित मुद्दे