উত্তর:
দ্বিমুখী বাইন্ডিংয়ের অর্থ কেবল:
ব্যাকবোনটিতে # 2 "বেকড-ইন" বাস্তবায়ন নেই (যদিও আপনি ইভেন্ট শ্রোতাদের ব্যবহার করে এটি অবশ্যই করতে পারেন)। নকআউট এর মতো অন্যান্য ফ্রেমওয়ার্কগুলি স্বয়ংক্রিয়ভাবে দ্বিমুখীভাবে বাঁধাই করে ।
ব্যাকবনে, আপনি কোনও দৃশ্যের "রেন্ডার" পদ্ধতিটিকে তার মডেলের "পরিবর্তন" ইভেন্টে আবদ্ধ করে সহজেই # 1 অর্জন করতে পারেন। # 2 অর্জনের জন্য, আপনাকে ইনপুট উপাদানটিতে পরিবর্তন শ্রোতাদেরও যুক্ত করতে হবে এবং model.setহ্যান্ডলারে কল করতে হবে।
ব্যাকবোনটিতে দ্বি-মুখী বাঁধাকপি সহ এখানে একটি ফিডল ।
দ্বিমুখী বাইন্ডিং এর অর্থ মডেলকে প্রভাবিত যে কোনও ডেটা সম্পর্কিত পরিবর্তনগুলি তত্ক্ষণাত ম্যাচিং ভিউ (গুলি) তে প্রচারিত হবে এবং দর্শন (গুলি) -এর (যে ব্যবহারকারীর দ্বারা বলি) যে কোনও পরিবর্তন অবিলম্বে অন্তর্নিহিত মডেলটিতে প্রতিফলিত হবে । যখন অ্যাপ্লিকেশন ডেটা পরিবর্তন হয়, তখন ইউআইও হয় এবং বিপরীতে।
এটি উপরে একটি ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য একটি খুব দৃ solid় ধারণা, কারণ এটি "মডেল" বিমূর্তিটিকে অ্যাপ্লিকেশনের অভ্যন্তরে সর্বত্র ব্যবহারের জন্য একটি সুরক্ষিত, পারমাণবিক ডেটা উত্স তৈরি করে। বলুন, যদি কোনও মডেল, একটি দৃশ্যের সাথে আবদ্ধ থাকে, পরিবর্তিত হয়, তবে এর ইউআই এর সাথে মিলিত টুকরা (দৃশ্য) তা প্রতিফলিত করবে, তা যাই হোক না কেন । এবং ইউআই-এর মিলের টুকরা (দৃশ্যটি) ব্যবহারকারীর ইনপুট / ডেটা সংগ্রহের মাধ্যম হিসাবে নিরাপদে ব্যবহার করা যেতে পারে, যাতে অ্যাপ্লিকেশন ডেটা আপ টু ডেট থাকে।
একটি ভাল দ্বিমুখী বাইন্ডিং বাস্তবায়ন অবশ্যই কোনও বিকাশকারী দৃষ্টিকোণ থেকে মডেল এবং কিছু দর্শন (গুলি) এর মধ্যে এই সংযোগটি যথাসম্ভব সহজতর করা উচিত।
ব্যাকবোন দ্বি-মুখী বাঁধাই সমর্থন করে না তা বলা একেবারেই অসত্য : যদিও কাঠামোর মূল বৈশিষ্ট্য না হলেও এটি ব্যাকবোন ইভেন্টগুলি ব্যবহার করে বেশ সহজভাবে সম্পাদন করা যেতে পারে। এটি সাধারণ কেসগুলির জন্য কোডের কয়েকটি সুস্পষ্ট লাইন ব্যয় করে; এবং আরও জটিল বাঁধার জন্য বেশ বিপজ্জনক হয়ে উঠতে পারে। এখানে একটি সাধারণ কেস (অনাকাঙ্ক্ষিত কোড, ঠিক উদাহরণের জন্য ফ্লাইতে লেখা):
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}কাঁচা ব্যাকবোন অ্যাপ্লিকেশনটিতে এটি একটি বেশ সাধারণ প্যাটার্ন। যেমনটি দেখতে পাচ্ছে, এর জন্য একটি শালীন পরিমাণের (সুন্দর মানক) কোডের প্রয়োজন।
অ্যাঙ্গুলারজেএস এবং অন্যান্য কিছু বিকল্প ( এম্বার , নকআউট ...) প্রথম-নাগরিক বৈশিষ্ট্য হিসাবে দ্বি-মুখী বন্ধন সরবরাহ করে। তারা কিছু ডিএসএল-এর অধীনে অনেকগুলি প্রান্ত-কেসকে বিমূর্ত করে এবং তাদের বাস্তুতন্ত্রের মধ্যে দ্বিমুখী বাইন্ডিং সংহত করতে সর্বোত্তম চেষ্টা করে। আমাদের উদাহরণটি এঙ্গুলারজেএস-এর সাথে এমন কিছু দেখতে পাবে (অরক্ষিত কোড, উপরে দেখুন):
<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: ''}বরং ছোট!
কিন্তু, যে কিছু সচেতন হতে পূর্ণাঙ্গ দ্বিমুখী বাঁধাই এক্সটেনশন রয়েছে দাঁড়া জন্য ভাল হিসাবে (জটিলতা কমে কাঁচা বিষয়ী অনুক্রমে): Epoxy , Stickit , ModelBinder ...
উদাহরণস্বরূপ, ইপোক্সির সাথে একটি দুর্দান্ত জিনিস হ'ল এটি আপনাকে টেম্পলেট (ডিওএম) এর মধ্যে বা ভিউ বাস্তবায়নের (জাভাস্ক্রিপ্ট) এর মধ্যে আপনার বাইন্ডিংগুলি (মডেল বৈশিষ্ট্যগুলি <-> দর্শনের ডোম উপাদানটি) ঘোষণা করতে দেয়। কিছু লোক ডিওএম / টেম্পলেটটিতে "নির্দেশাবলী" যুক্ত করার পক্ষে দৃ strongly়ভাবে অপছন্দ করেন (যেমন অ্যাঙ্গুলারজেএস দ্বারা প্রয়োজনীয় এনজি- * বৈশিষ্ট্যগুলি, বা এমবারের ডেটা-বাইন্ড বৈশিষ্ট্যগুলি)।
ইপোক্সি উদাহরণ হিসাবে গ্রহণ করে, কেউ কাঁচা ব্যাকবোন অ্যাপ্লিকেশনটিকে এই জাতীয় কিছুতে পুনরায় কাজ করতে পারে (…):
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 (মডেল দেখুন-ইন্টেন্ট) ধারণা চেক করতে চান পারে চক্র ।
ম্যাকগার্নাগেলের একটি দুর্দান্ত উত্তর রয়েছে, এবং আপনি তার গ্রহণ করতে চাইবেন তবে আমি ভেবেছিলাম যে ডেটাবাইন্ডিং কীভাবে কাজ করে তা আমি উল্লেখ করব (যেহেতু আপনি জিজ্ঞাসা করেছিলেন)।
এটি যখনই ডেটাতে কোনও পরিবর্তন আনা হয় তখন ঘটনাগুলিকে লক্ষ্য করে গুলি প্রয়োগ করা হয় যার ফলে শ্রোতাদের (যেমন ইউআই) আপডেট করা হয় be
দ্বি-মুখী বাইন্ডিং দু'বার এটি করে কাজ করে যাতে আপনি কোনও ইভেন্টের লুপে আটকে না পড়ে (এই ইভেন্টের আপডেটের ফলে অন্য ইভেন্টটি বরখাস্ত হওয়ার কারণ হয়) তা নিশ্চিত করার জন্য কিছুটা যত্ন নেওয়া হয়েছিল।
আমি এটি একটি মন্তব্যে রাখছি, তবে এটি বেশ দীর্ঘ হয়ে যাচ্ছিল ...
আসলে emberjsদ্বিমুখী বাইন্ডিং সমর্থন করে যা একটি জাভাস্ক্রিপ্ট এমভিসি ফ্রেমওয়ার্কের জন্য সবচেয়ে শক্তিশালী বৈশিষ্ট্য। 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নোট করুন যে বাইন্ডিংগুলি তত্ক্ষণাত আপডেট হয় না। পরিবর্তনগুলি সিঙ্ক্রোনাইজ করার আগে আপনার সমস্ত অ্যাপ্লিকেশন কোড চলমান শেষ না হওয়া পর্যন্ত অ্যাম্বার অপেক্ষা করে, তাই মানগুলি ক্ষণস্থায়ী হলে সিঙ্কিংয়ের বাইন্ডিংয়ের ওভারহেড সম্পর্কে চিন্তা না করে আপনি যতবার চান তার যতবার পরিবর্তন করতে পারেন।
আশা করি এটি নির্বাচিত মূল উত্তর প্রসারিত করতে সহায়তা করবে।
উল্লেখযোগ্য যে এখানে অনেকগুলি পৃথক সমাধান রয়েছে যা দ্বি-মুখী বাঁধাইয়ের প্রস্তাব দেয় এবং সত্যিই দুর্দান্ত খেলে।
এই মডেল বাইন্ডারের সাথে আমার একটি সুন্দর অভিজ্ঞতা হয়েছে - https://github.com/theironcook/Backbone.ModelBinder । যা বুদ্ধিমান ডিফল্ট দেয় তবে ইনপুট উপাদানগুলিতে মডেল বৈশিষ্ট্যের অনেকগুলি কাস্টম jquery সিলেক্টর ম্যাপিং pping
গিথুবটিতে ব্যাকবোন এক্সটেনশন / প্লাগইনগুলির আরও বর্ধিত তালিকা রয়েছে