এক্সগ্রেশন এক্সপ্রেশন 'ট্র্যাক বাই' বোঝা


101

এনজুলারজে এনজি-রিপিটেশন দ্বারা ট্র্যাক কীভাবে কাজ করে তা বুঝতে আমার সমস্যা হচ্ছে । ডকুমেন্টেশন খুব দুর্লভ: http://docs.angularjs.org/api/ng/directive/ng পুনরাবৃত্তি

আপনি কী ব্যাখ্যা করতে পারবেন যে ডাটাবেইন্ডিং এবং অন্যান্য প্রাসঙ্গিক দিকগুলির ক্ষেত্রে কোডের এই দুটি স্নিপেটের মধ্যে পার্থক্য কী ?

সঙ্গে: track by $index

<!--names is an array-->
<div ng-repeat="(key, value) in names track by $index">
  <input ng-model="value[key]">                         
</div>

(একই আউটপুট) ছাড়া

<!--names is an array-->
<div ng-repeat="(key, value) in names">
   <input ng-model="value[key]">                         
</div>

একটি দুর্দান্ত প্রশ্ন, খুব ভাল উত্তর সহ! ওপি কোন অনুশোচনা কোনও উত্তর মেনে নিল না - বা আপনি কি মনে করেন না যে প্রশ্নের উত্তরটি সঠিকভাবে দেওয়া হয়েছিল?
মাওগ বলছেন মনিকা

তুমি ঠিক বলছো! আমি সবে টিজির উত্তর গ্রহণ করেছি।
জোনাথন গ্রুপ

উত্তর:


96

track by $indexআপনার ডেটা উত্সে সদৃশ শনাক্তকারী থাকলে আপনি এটি করতে পারেন

উদাহরণ: $scope.dataSource: [{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]

সনাক্তকারী হিসাবে আইডি ব্যবহার করার সময় আপনি এই সংগ্রহটি পুনরাবৃত্তি করতে পারবেন না (সদৃশ আইডি: 1)।

কাজ করবেন না:

<element ng-repeat="item.id as item.name for item in dataSource">
  // something with item ...
</element>

তবে আপনি যদি ব্যবহার করতে পারেন track by $index:

<element ng-repeat="item in dataSource track by $index">
  // something with item ...
</element>

1
আপনার উত্তরের জন্য ধন্যবাদ! তবে অবশ্যই সদৃশ সনাক্তকারীরা কেবল ব্যবহারের ক্ষেত্রে নয় use 'হুডের নিচে' কী হচ্ছে তাও আমি জানতে চাই।
জোনাথন গ্রুপ

2
ঠিক আছে, এটি সহজ: কেবল কোডটি দেখুন , এটি সমস্ত ওপেন সোর্স;)
নীলকে

4
এই প্রশ্নটি পুরানো তবে আমি এখনও মনে করি এটি আরও ভাল বেনডেল.com/blog /… এর ব্যাখ্যাটির সংক্ষিপ্ত সংস্করণটি বুঝতে এখানে সহায়তা করতে পারে ডকস.আঙ্গুলারজেএস.আরআর
ডি

3
আরও একটি বিষয় বিবেচনায় নেওয়ার বিষয়টি হ'ল আপনি যদি কী দ্বারা ট্র্যাক ব্যবহার করতে পারেন তবে আপনি আরও ভাল পারফরম্যান্স পাবেন (blog.500tech.com/is-reactjs- ব্রেকফাস্ট)। এই বৈশিষ্ট্যটি আপনাকে একটি অনন্য সনাক্তকারী ব্যবহার করে একটি এনজিপিপিট ডোম (ডকুমেন্ট অবজেক্ট মডেল) নোডের সাথে জাভাস্ক্রিপ্ট অবজেক্টটি যুক্ত করতে দেয়। এই সংঘবদ্ধ স্থানে, অ্যাঙ্গুলারজেএস অকারণে ডোম নোডগুলি ধ্বংস এবং পুনরায় তৈরি করবে না। এটির একটি বিশাল পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা সুবিধা ( bennadel.com/blog/… ) থাকতে পারে।
ব্র্যালিও

আমার কাছে 700 টি বিজোড় আইটেমের একটি তালিকা রয়েছে। রেন্ডার সময়টি 4 সেকেন্ড থেকে 100 মিমিতে চলে গেছে। ট্র্যাক বাই দ্বারা সমস্ত এনজিরিপিটের জন্য বিশ্রাম থেকে প্রাপ্ত ডেটার উপর ভিত্তি করে ব্যবহার করা উচিত।
প্যাট্রিক

60

একটি সংক্ষিপ্তসার:

track by এনজি-রিপিট দ্বারা তৈরি ডিওএম জেনারেশনের (এবং প্রধানত পুনরায় প্রজন্মের) সাথে আপনার ডেটা লিঙ্ক করার জন্য ব্যবহৃত হয়।

আপনি যখন যুক্ত track byকরবেন তখন মূলত প্রদত্ত সংগ্রহে ডেটা অবজেক্টের জন্য একক ডিওএম উপাদান তৈরি করতে কৌনিকটি বলুন

পেজিং এবং ফিল্টারিংয়ের সময়, বা যে কোনও ক্ষেত্রে যখন বস্তুগুলি ng-repeatতালিকা থেকে বাদ দেওয়া বা অপসারণ করা যায় তখন এটি কার্যকর হতে পারে ।

সাধারণত, track byকৌণিক ব্যতীত একটি সম্প্রসারিত সম্পত্তি - $$hashKey- আপনার জাভাস্ক্রিপ্ট অবজেক্টগুলিতে ইনজেকশনের মাধ্যমে ডিওএম অবজেক্টগুলিকে সংকলনের সাথে সংযুক্ত করবে এবং প্রতিটি পরিবর্তনের সাথে এটি পুনরায় জেনারেট করবে (এবং একটি ডিওএম অবজেক্টকে পুনঃসংশ্লিষ্ট করবে)।

সম্পূর্ণ ব্যাখ্যা:

http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

আরও কার্যকর গাইড:

http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

(ট্র্যাক বাই কৌনিক> 1.2 এ উপলব্ধ)


8

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


কোন প্রমাণ যা প্রমাণ করে?
আজেফরাতি

পুনরায় রেন্ডারিং করার জন্য কি কোনও উপায় আছে? নাকি আশেপাশে অন্য কোন কাজ? আমি এটি উল্লেখ করা কোথাও পাইনি তবে আমি বিশ্বাস করি এটিই আমার জন্য একটি গোলযোগ সৃষ্টি করে এবং আমি ইতিমধ্যে অনেক সময় নষ্ট করেছিলাম।
নেভারজিভআপ 161

1
হয় ট্র্যাক দ্বারা ব্যবহার করবেন না বা অবজেক্ট অবজেক্টে অনন্য সনাক্তকারী পরিবর্তন করবেন না। নোট আপনি পরিবর্তন করতে পারবেন না $ সূচক, এটি ব্যবহার না করার প্রস্তাবিত $ সূচী পরিবর্তে আইডেন্টিফিকটি অবজেক্টের (যেমন আইডি) ব্যবহার করুন
ram1993
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.