दो तरह से बाध्यकारी है?

173

मैंने बहुत पढ़ा है कि Backbone दो तरह से बाध्यकारी नहीं है, लेकिन मैं इस अवधारणा को बिल्कुल नहीं समझता।

कोई मुझे एक उदाहरण दे सकता है कि एमवीसी कोडबेस में दो तरह से बाध्यकारी कैसे काम करता है और यह बैकबोन के साथ कैसे नहीं होता है?

javascript data-binding backbone.js

— क्रिस एम
स्रोत

249

दो-तरफ़ा बाध्यकारी का मतलब है:

जब मॉडल में गुण अपडेट हो जाते हैं, तो यूआई करता है।
जब यूआई तत्व अपडेट होते हैं, तो परिवर्तन मॉडल में वापस प्रचारित हो जाते हैं।

बैकबोन में # 2 के "बेक्ड-इन" कार्यान्वयन नहीं है (हालांकि आप निश्चित रूप से घटना श्रोताओं का उपयोग करके कर सकते हैं)। नॉकआउट जैसे अन्य ढांचे दो तरह से स्वचालित रूप से बाध्यकारी होते हैं ।

बैकबोन में, आप आसानी से अपने मॉडल के "परिवर्तन" इवेंट में "रेंडर" विधि को बांधकर # 1 प्राप्त कर सकते हैं। # 2 को प्राप्त करने के लिए, आपको इनपुट तत्व में एक परिवर्तन श्रोता को भी जोड़ना होगा, और model.setहैंडलर में कॉल करना होगा ।

यहाँ बैकबोन में दो-तरफा बाइंडिंग के साथ एक फिडेल है।

— McGarnagle
स्रोत

25

एक बार देखने के बाद उत्तर इतना दर्दनाक है। स्पष्ट उत्तर और उदाहरण प्रदान करने के लिए समय निकालने के लिए बहुत-बहुत धन्यवाद।

— क्रिस एम

और फायरबेस के साथ आता है ... 3-रास्ता डेटाबाइंडिंग -> व्यू, मॉडल, डेटाबेस। बस सोचा था कि बहुत साफ था।

— लेवी फुलर

संक्षिप्त और संक्षिप्त। +1

— करन_पावर_बाइ_रेडबुल

46

दो-तरफा बाइंडिंग का मतलब है कि मॉडल को प्रभावित करने वाले किसी भी डेटा-संबंधित परिवर्तन को तुरंत मिलान दृश्य (एस) में प्रचारित किया जाता है, और यह कि दृश्य में किए गए किसी भी परिवर्तन (उपयोगकर्ता द्वारा), तुरंत दिखाई देते हैं अंतर्निहित मॉडल में । जब एप्लिकेशन डेटा बदलता है, तो UI और इसके विपरीत होता है।

यह शीर्ष पर एक वेब अनुप्रयोग बनाने के लिए एक बहुत ही ठोस अवधारणा है, क्योंकि यह "मॉडल" को एक सुरक्षित, परमाणु डेटा स्रोत बनाता है जो अनुप्रयोग के भीतर हर जगह उपयोग करता है। कहते हैं, अगर एक मॉडल, एक दृश्य के लिए बाध्य है, बदल जाता है, तो इसके यूआई (देखने के लिए) का मिलान टुकड़ा प्रतिबिंबित करेगा, चाहे कोई भी हो । और यूआई (दृश्य) के मिलान टुकड़े को सुरक्षित रूप से उपयोगकर्ता इनपुट / डेटा एकत्र करने के साधन के रूप में उपयोग किया जा सकता है, ताकि एप्लिकेशन डेटा को अप-टू-डेट बनाए रखा जा सके।

एक अच्छा दो-तरफ़ा बाइंडिंग कार्यान्वयन स्पष्ट रूप से एक मॉडल और कुछ दृश्य (ओं) के बीच एक संबंधक के दृष्टिकोण से संभव बनाना चाहिए।

तब यह कहना काफी असत्य है कि बैकबोन दो-तरफ़ा बाइंडिंग का समर्थन नहीं करता है : जबकि फ्रेमवर्क की एक मुख्य विशेषता नहीं है, हालांकि बैकबोन के इवेंट्स का उपयोग करके इसे काफी सरल रूप से प्रदर्शित किया जा सकता है। यह सरल मामलों के लिए कोड की कुछ स्पष्ट पंक्तियों की लागत; और अधिक जटिल बाइंडिंग के लिए काफी खतरनाक हो सकता है। यहाँ एक सरल मामला है (उदाहरण के लिए, केवल चित्रण के लिए मक्खी पर लिखा गया अनुपयोगी कोड):

Model = Backbone.Model.extend
  defaults:
    data: ''

View = Backbone.View.extend
  template: _.template("Edit the data: <input type='text' value='<%= data %>' />")

  events:
    # Listen for user inputs, and edit the model.
    'change input': @setData

  initialize: (options) ->
    # Listen for model's edition, and trigger UI update
    @listenTo @model, 'change:data', @render

  render: ->
    @$el.html @template(@model.attributes)
    @

  setData: (e) =>
    e.preventDefault()
    @model.set 'data', $(e.currentTarget).value()

model: new Model()
view = new View {el: $('.someEl'), model: model}

कच्चे बैकबोन एप्लिकेशन में यह एक बहुत ही विशिष्ट पैटर्न है। जैसा कि एक देख सकता है, इसे (सुंदर मानक) कोड की एक सभ्य राशि की आवश्यकता होती है।

AngularJS और कुछ अन्य विकल्प ( एम्बर , नॉकआउट ...) पहले-नागरिक सुविधा के रूप में दो-तरफा बाध्यकारी प्रदान करते हैं। वे कुछ डीएसएल के तहत कई किनारे-मामलों को अमूर्त करते हैं, और अपने पारिस्थितिकी तंत्र के भीतर दो-तरफ़ा बंधन को एकीकृत करने में अपना सर्वश्रेष्ठ करते हैं। हमारा उदाहरण एंगुलरजेएस के साथ कुछ इस तरह दिखेगा (बिना कोड, ऊपर देखें):

<div ng-app="app" ng-controller="MainCtrl">
  Edit the data:
  <input name="mymodel.data" ng-model="mymodel.data">
</div>

angular.module('app', [])
  .controller 'MainCtrl', ($scope) ->
    $scope.mymodel = {data: ''}

बल्कि छोटा!

लेकिन, ध्यान रहे कि बैकबोन के लिए पूरी तरह से दो-तरफा बाइंडिंग एक्सटेंशन मौजूद हैं (कच्ची, घटती जटिलता के व्यक्तिपरक क्रम में): एपॉक्सी , स्टिकिट , मॉडलबाइंडर ...

उदाहरण के लिए, एपॉक्सी के साथ एक अच्छी बात यह है कि यह आपको अपने बाइंडिंग (मॉडल विशेषताओं <-> दृश्य के DOM तत्व) को या तो टेम्पलेट (DOM), या दृश्य कार्यान्वयन (जावास्क्रिप्ट) के भीतर घोषित करने की अनुमति देता है। कुछ लोग डोम / टेम्प्लेट में "निर्देश" को दृढ़ता से नापसंद करते हैं (जैसे कि एनजीआरजेएस द्वारा आवश्यक एनजी * * विशेषताएँ, या एम्बर के डेटा-बाइंड गुण)।

एक उदाहरण के रूप में एपॉक्सी को लेते हुए, कोई कच्चे बैकबोन एप्लिकेशन को इस तरह से (…) कर सकता है:

Model = Backbone.Model.extend
  defaults:
    data: ''

View = Backbone.Epoxy.View.extend
  template: _.template("Edit the data: <input type='text' />")
  # or, using the inline form: <input type='text' data-bind='value:data' />

  bindings:
    'input': 'value:data'

  render: ->
    @$el.html @template(@model.attributes)
    @

model: new Model()
view = new View {el: $('.someEl'), model: model}

सब सब में, बहुत ज्यादा सभी "मुख्यधारा" जेएस चौखटे दो-तरफ़ा बंधन का समर्थन करते हैं। उनमें से कुछ, जैसे कि बैकबोन, को सुचारू रूप से काम करने के लिए कुछ अतिरिक्त काम की आवश्यकता होती है , लेकिन वे वही हैं जो इसे करने के लिए एक विशिष्ट तरीके को लागू नहीं करते हैं, जिसके साथ शुरू करना है। तो यह वास्तव में आपके मन की स्थिति के बारे में है।

इसके अलावा, आप फ्लक्स में दिलचस्पी ले सकते हैं , एक परिपत्र पैटर्न के माध्यम से एकतरफा बंधन को बढ़ावा देने वाले वेब अनुप्रयोगों के लिए एक अलग वास्तुकला। यह सामंजस्य सुनिश्चित करने के लिए किसी भी डेटा परिवर्तन पर यूआई घटकों के तेज, समग्र पुन: प्रतिपादन की अवधारणा पर आधारित है और कोड / डेटाफ्लो के बारे में तर्क करना आसान बनाता है। उसी प्रवृत्ति में, आप उदाहरण के लिए MVI (मॉडल-व्यू-इंटेंट) की अवधारणा की जाँच करना चाहते हैं, उदाहरण के लिए साइकिल ।

— chikamichi
स्रोत

3

कई डेवलपर्स, विशेष रूप से रिएक्ट / फ्लक्स देव बड़े पैमाने के ऐप्स के निर्माण के लिए दो-तरफ़ा सुरक्षित पैटर्न को बाध्यकारी नहीं मानते हैं।

— एंडी

28

McGarnagle के पास एक शानदार जवाब है, और आप उसे स्वीकार करना चाहते हैं, लेकिन मैंने सोचा कि मैं उल्लेख करूँगा (जब से आपने पूछा था) डेटाबाइंडिंग कैसे काम करती है।

जब भी डेटा में कोई बदलाव किया जाता है, तो यह आम तौर पर फायरिंग घटनाओं द्वारा कार्यान्वित किया जाता है, जो तब श्रोताओं (जैसे यूआई) को अद्यतन करने का कारण बनता है।

दो बार ऐसा करने से दो-तरफा बाइंडिंग कार्य होता है, यह सुनिश्चित करने के लिए कि आप किसी इवेंट लूप में फंस न जाएं, (जहां इवेंट से अपडेट किसी अन्य घटना को निकाल दिया जाता है) को ध्यान में रखते हुए।

मैं एक टिप्पणी में यह करने जा रहा था, लेकिन यह बहुत लंबा हो रहा था ...

— जेफ
स्रोत

2

वास्तव में emberjsदो-तरफ़ा बाइंडिंग का समर्थन करता है, जो एक जावास्क्रिप्ट MVC फ्रेमवर्क के लिए सबसे शक्तिशाली विशेषता है। आप यह जाँच कर सकते हैं कि इसका उल्लेख कहाँ हैbinding अपने उपयोगकर्ता गाइड में है।

एम्बरज के लिए, दो तरह से बाइंडिंग बनाने के लिए, अंत में स्ट्रिंग बाइंडिंग के साथ एक नई प्रॉपर्टी बनाकर, फिर वैश्विक स्कोप से एक पथ निर्दिष्ट करना है:

App.wife = Ember.Object.create({
  householdIncome: 80000
});

App.husband = Ember.Object.create({
  householdIncomeBinding: 'App.wife.householdIncome'
});

App.husband.get('householdIncome'); // 80000

// Someone gets raise.
App.husband.set('householdIncome', 90000);
App.wife.get('householdIncome'); // 90000

ध्यान दें कि बाइंडिंग तुरंत अपडेट नहीं होती हैं। Ember तब तक प्रतीक्षा करता है जब तक कि आपके सभी एप्लिकेशन कोड परिवर्तनों को सिंक्रनाइज़ करने से पहले समाप्त नहीं हो जाते हैं, इसलिए जब आप मान क्षणिक होते हैं, तो आप बाइंडिंग को सिंक करने के ओवरहेड के बारे में चिंता किए बिना एक बाउंड प्रॉपर्टी को बदल सकते हैं।

आशा है कि यह चयनित मूल उत्तर का विस्तार करने में मदद करता है।

— विया डिजाइन
स्रोत

1

इस बात का उल्लेख करते हुए कि कई अलग-अलग समाधान हैं जो दो तरह से बाध्यकारी हैं और वास्तव में अच्छी तरह से खेलते हैं।

इस मॉडल बाइंडर के साथ मुझे एक सुखद अनुभव हुआ - https://github.com/theironcook/Backbone.ModelBinder । जो अभी तक इनपुट तत्वों के लिए मॉडल विशेषताओं के कस्टम jquery चयनकर्ता मानचित्रण की एक बहुत कुछ समझदार चूक देता है।

जीथब पर बैकबोन एक्सटेंशन / प्लगइन्स की अधिक विस्तारित सूची है

— डैनियल
स्रोत