নকআউট ভিউ মডেলগুলির মধ্যে পার্থক্য যা বস্তুর আক্ষরিক বনাম কার্য হিসাবে ঘোষিত হয়

Question

নকআউট জেএসে আমি দেখি মডেলগুলি হয় হিসাবে ঘোষিত হয়েছে:

var viewModel = {
    firstname: ko.observable("Bob")
};

ko.applyBindings(viewModel );

বা:

var viewModel = function() {
    this.firstname= ko.observable("Bob");
};

ko.applyBindings(new viewModel ());

দুজনের মধ্যে পার্থক্য কী, যদি হয়?

আমি নকআউটজস গুগল গ্রুপে এই আলোচনাটি পেয়েছি তবে এটি সত্যই আমাকে সন্তোষজনক উত্তর দেয় নি।

আমি কিছু তথ্য দিয়ে মডেলটির সূচনা করতে চাইলে আমি একটি কারণ দেখতে পাচ্ছি, উদাহরণস্বরূপ:

var viewModel = function(person) {
    this.firstname= ko.observable(person.firstname);
};

var person = ... ;
ko.applyBindings(new viewModel(person));

তবে যদি আমি এটি না করে থাকি তবে আমি কোন স্টাইলটি পছন্দ করি তা বিবেচনা করে?

Comments

আমি বিশ্বাস করি না যে একটি পার্থক্য আছে। আমি সাধারণত কনস্ট্রাক্টর প্যাটার্নটি ব্যবহার করি, কারণ আমার প্রায়শই এমন পদ্ধতি থাকে যা আমি ঘোষণা করতে পছন্দ করি prototype(যে পদ্ধতিগুলি প্রায়শই সার্ভার থেকে ডেটা আনা এবং সে অনুযায়ী ভিউ মডেলটি আপডেট করা হয়)। তবে আপনি তাদের স্পষ্টতই কোনও বস্তুর আক্ষরিক সম্পত্তি হিসাবে ঘোষণা করতে পারেন, তাই আমি সত্যিই কোনও পার্থক্য দেখতে পাচ্ছি না।

— জেমস অ্যালার্ডাইস

নকআউটের সাথে এর

— কোনও যোগসূত্র নেই,

@ কেভ যদি ভিউমোডেল কোনও কনস্ট্রাক্টর ফাংশন হয় তবে আপনি এটিকে বিভিন্ন পার্সনভিউমোডেল = ফাংশন () like ...};

— এলিজাবেথ

Answer 1

আপনার ভিউ মডেলটি সংজ্ঞায়িত করতে একটি ফাংশন ব্যবহার করার বেশ কয়েকটি সুবিধা রয়েছে।

প্রধান সুবিধাটি হ'ল আপনার যে মানটির সাথে তাত্ক্ষণিকভাবে অ্যাক্সেস রয়েছে thisতা তৈরি হওয়া উদাহরণের সমান। এর অর্থ আপনি করতে পারেন:

var ViewModel = function(first, last) {
  this.first = ko.observable(first);
  this.last = ko.observable(last);
  this.full = ko.computed(function() {
     return this.first() + " " + this.last();
  }, this);
};

সুতরাং, আপনার গণনা করা পর্যবেক্ষণযোগ্যকে অন্য thisকোনও সুযোগ থেকে ডেকে আনা হলেও যথাযথ মানের সাথে আবদ্ধ হতে পারে ।

আক্ষরিক কোনও অবজেক্টের সাথে আপনাকে করতে হবে:

var viewModel = {
   first: ko.observable("Bob"),
   last: ko.observable("Smith"),
};

viewModel.full = ko.computed(function() {
   return this.first() + " " + this.last();
}, viewModel);

viewModelসেক্ষেত্রে আপনি গণনা করা পর্যবেক্ষণযোগ্যতে সরাসরি ব্যবহার করতে পারবেন তবে এটি অবিলম্বে মূল্যায়ন করা হবে (ডিফল্টরূপে) সুতরাং আপনি এটি বস্তুর আক্ষরিক মধ্যে সংজ্ঞায়িত করতে পারবেন না, যেমন viewModelবস্তুর আক্ষরিক বন্ধ হওয়ার পরে সংজ্ঞায়িত হয় না। আপনার ভিউ মডেলটি তৈরি করা কোনও কলটিতে আবশ্যক নয় এমনটি অনেকেই পছন্দ করেন না।

আপনি thisসর্বদা উপযুক্ত তা নিশ্চিত করতে আপনি যে অন্য প্যাটার্নটি ব্যবহার করতে পারেন তা হ'ল ফাংশনে একটি ভেরিয়েবলের উপযুক্ত মানের সমান thisএবং পরিবর্তে এটি ব্যবহার করা। এটি এমন হবে:

var ViewModel = function() {
    var self = this;
    this.items = ko.observableArray();
    this.removeItem = function(item) {
         self.items.remove(item);
    }
};

এখন, আপনি যদি কোনও স্বতন্ত্র আইটেম এবং কল করার সুযোগে থাকেন তবে আসলে $root.removeItemমানটি thisসেই স্তরে আবদ্ধ হওয়া ডেটা হবে (যা আইটেমটি হবে)। এই ক্ষেত্রে স্ব ব্যবহার করে আপনি নিশ্চিত করতে পারেন যে এটি সামগ্রিক দর্শন মডেল থেকে সরানো হচ্ছে।

অন্য একটি বিকল্প ব্যবহার করছে bind, যা আধুনিক ব্রাউজারগুলি দ্বারা সমর্থিত এবং কেও সমর্থন করে যদি এটি সমর্থন না করে। সেক্ষেত্রে এটি দেখতে এমন হবে:

var ViewModel = function() {
    this.items = ko.observableArray();
    this.removeItem = function(item) {
         this.items.remove(item);
    }.bind(this);
};

এই বিষয়টিতে আরও অনেক কিছু বলা যেতে পারে এবং অনেকগুলি নিদর্শন যা আপনি অন্বেষণ করতে পারেন (যেমন মডিউল প্যাটার্ন এবং মডিউল প্যাটার্ন প্রকাশ করে), তবে মূলত কোনও ফাংশন ব্যবহার করা আপনাকে কীভাবে বস্তুটি তৈরি হয় এবং রেফারেন্স করার ক্ষমতা সম্পর্কে আরও নমনীয়তা এবং নিয়ন্ত্রণ দেয় উদাহরণটি ব্যক্তিগত যে ভেরিয়েবল।

Comments

দুর্দান্ত উত্তর। আমি প্রায়শই ভিউমোডেলসের মতো জটিল বিষয়গুলির জন্য একটি ফাংশন (উদ্ভাসিত মডিউল প্যাটার্ন ব্যবহার করে) ব্যবহার করি। তবে সাধারণ মডেলগুলির জন্য, আমি একটি ফাংশন ব্যবহার করি যাতে আমি এক জায়গায় সমস্ত কিছু পরিচালনা করতে পারি।

— জন পাপা

@ জোহানপাপা - নকআউটে আপনার বহুবচন সাইটটি সবেমাত্র দেখছেন (মোটামুটি অর্ধেক পথ পেরিয়ে - এবং কাকতালীয়ভাবে কেবল অবজেক্ট আক্ষরিক বনাম ফাংশনের অংশটি দেখেছেন)। সত্যিই খুব ভাল কাজ করেছে এবং পেনিসি ড্রপ করতে সহায়তা করেছে। একাকী এক মাসের সাবস্ক্রিপশনটি ভাল।

— কেভ

@ কেভ - ধন্যবাদ আপনি খুশি হন যে আপনি এর থেকে মূল্য পাচ্ছেন। কেউ কেউ সেই মডিউলটি সত্যই নকআউট ধারণা নয়, জাভাস্ক্রিপ্টের নিদর্শন হিসাবে বেশি যত্নশীল। তবে আমি নকআউটের সাথে আরও জানতে পেরেছিলাম যে এই ধারণাগুলি আমাকে আরও ক্লিনার আরও স্থিতিশীল কোড তৈরি করতে সহায়তা করেছে। যাইহোক, আনন্দিত আপনি এটি উপভোগ করেছেন :)

— জন পাপা

self.items = ko.observableArray () হওয়া উচিত নয়; আপনার দ্বিতীয় উদাহরণে? আপনি এটি ব্যবহার করেছেন, এটা কি সঠিক?

— জ্যাকনোভা

কন্সট্রাকটর ফাংশনে @JackNova selfএবং thisএকই, তাই পারেন সমতুল্য হবে। অপসারণ আইটেম ফাংশনে, selfআরও দরকারী হয়ে ওঠে, যেমন thisকোনও শিশু আইটেমের প্রসঙ্গে মৃত্যুদন্ড কার্যকর করার সময়কার বর্তমান উদাহরণটি আর হবে না।

— আরপি নেইমায়ার

Answer 2

আমি একই রকম হলেও একটি আলাদা পদ্ধতি ব্যবহার করি:

var viewModel = (function () {
  var obj = {};
  obj.myVariable = ko.observable();
  obj.myComputed = ko.computed(function () { return "hello" + obj.myVariable() });

  ko.applyBindings(obj);
  return obj;
})();

কয়েকটি কারণ:

1. ব্যবহার না করা this, যা ko.computedএস ইত্যাদির মধ্যে ব্যবহারের সময় বিভ্রান্তি সৃষ্টি করতে পারে
2. আমার ভিউমোডেলটি একটি সিঙ্গলটন, আমার একাধিক উদাহরণ তৈরি করার দরকার নেই (যেমন new viewModel())

Comments

ভুল না হলে এটি মডিউল প্যাটার্ন প্রকাশ করছে। ভাল উত্তর কিন্তু প্রশ্ন এই প্যাটার্ন সম্পর্কে ছিল না।

— ফিল

@ পল: পুরানো সুতার জন্য জিজ্ঞাসা করুন। আপনি বলেছেন My viewModel is a singleton, I don't need to create multiple instances (i.e. new viewModel()) তবে এটি স্পষ্ট নয় যে আপনি কী বলার চেষ্টা করছেন আপনি I don't need to create multiple instances আরও ব্যবহারের মাধ্যমে প্লিজ আসতে পারেন যাতে কেউ আপনার পদ্ধতির সুবিধা বুঝতে পারে। ধন্যবাদ

— মৌ

আইএমও, আপনি ভিউমোডেলটিকে একটি হিসাবে ঘোষণা করার একটি functionকারণ হ'ল আপনি এটিকে একাধিকবার কার্যকর করবেন। যাইহোক, সম্পর্কে আমার উদাহরণে, এটি একটি তাত্ক্ষণিকভাবে অনুরোধ করা অনামিকার ফাংশন, তাই এটি একবারের বেশি তৈরি হবে না। এটি উপরের উদাহরণে অবজেক্ট লিটারেলের সাথে খুব মিল, তবে আপনাকে আরও বিচ্ছিন্নতা দেয়

— পলস্ল্যাটার 19