অ্যাঙ্গুলারজেএস-এ, আমি কীভাবে 2-উপায় ডেটা বাঁধাই ছাড়াই একটি মান রেন্ডার করতে পারি? পারফরম্যান্সের কারণে কেউ এটি করতে পারে, বা একটি নির্দিষ্ট সময়ে সময়ে একটি মান সরবরাহ করতে পারে।
নিম্নলিখিত উদাহরণ উভয় ডেটা বাঁধাই ব্যবহার করে:
<div>{{value}}</div>
<div data-ng-bind="value"></div>
আমি value কোনও ডেটা বাঁধাই ছাড়াই কীভাবে রেন্ডার করব ?
ng-modelআপনাকে দ্বিমুখী ডেটা বাঁধাই দেয়: মডেল পরিবর্তনগুলি -> আপডেট দেখুন, দেখুন পরিবর্তনগুলি -> মডেল আপডেটগুলি।
উত্তর:
কৌণিক 1.3+
1.3-এ, কৌনিকটি নিম্নলিখিত সিনট্যাক্স ব্যবহার করে এটি সমর্থন করেছে।
<div>{{::message}}</div>
এই উত্তরে উল্লিখিত হিসাবে ।
কৌণিক 1.2 এবং নীচে
এটি সহজ এবং একটি প্লাগইন প্রয়োজন হয় না। এটা দেখ.
এই ছোট নির্দেশটি আপনি যা অর্জন করার চেষ্টা করছেন তা সহজেই সম্পাদন করবে
app.directive('bindOnce', function() {
return {
scope: true,
link: function( $scope ) {
setTimeout(function() {
$scope.$destroy();
}, 0);
}
}
});
আপনি একবার এই মত বাঁধাই করতে পারেন
<div bind-once>I bind once - {{message}}</div>
আপনি স্বাভাবিক মত বাঁধাই করতে পারেন
<div ng-bind="message" bind-once></div>
ডেমো: http://jsfiddle.net/fffnb/
আপনারা কেউ কেউ কৌণিক বাতারাঙ্গ ব্যবহার করতে পারেন, এবং মন্তব্যে যেমন উল্লেখ করা হয়েছে আপনি যদি এই নির্দেশিকাটি ব্যবহার করেন তবে উপাদানটি এখনও আবশ্যক না হলে প্রদর্শিত হয়, আমি দৃ sure়ভাবে নিশ্চিত যে এটির সাথে ক্লাসগুলির সাথে কিছু যুক্ত রয়েছে যা তাই আছে এটি চেষ্টা করুন, এটি কাজ করা উচিত (পরীক্ষিত নয়) । যদি এটি আপনার পক্ষে কাজ করে তবে আমাকে মন্তব্যগুলিতে জানান।
app.directive('bindOnce', function() {
return {
scope: true,
link: function( $scope, $element ) {
setTimeout(function() {
$scope.$destroy();
$element.removeClass('ng-binding ng-scope');
}, 0);
}
}
});
@ x0b : আপনার যদি ওসিডি থাকে এবং আপনি খালি classবৈশিষ্ট্যটি মুছতে চান তবে এটি করুন
!$element.attr('class') && $element.removeAttr('class')
দেখে মনে হচ্ছে কৌণিক 1.3 (বিটা 10 দিয়ে শুরু) এর মধ্যে এককালীন বাঁধাই রয়েছে:
https://docs.angularjs.org/guide/expression#one-Time- বাইন্ডিং
এককালীন বাঁধাই
:: দিয়ে শুরু হওয়া একটি প্রকাশকে এককালীন প্রকাশ বলে মনে করা হয়। একবারের এক্সপ্রেশনগুলি স্থিতিশীল হওয়ার পরে পুনরায় গণনা বন্ধ হবে, যা প্রথম হজমের পরে ঘটে যদি অভিব্যক্তির ফলাফলটি একটি অপরিজ্ঞাত মান হয় (নীচে মান স্থায়িত্ব অ্যালগরিদম দেখুন)।
বাইন্ডনস মডিউলটি ব্যবহার করুন । আপনাকে জেএস ফাইল অন্তর্ভুক্ত করতে হবে এবং এটি আপনার অ্যাপ্লিকেশন মডিউলের নির্ভরতা হিসাবে যুক্ত করতে হবে:
var myApp = angular.module("myApp", ['pasvaz.bindonce']);
এই লাইব্রেরিটি আপনাকে একবারে আটকানো আইটেমগুলি রেন্ডার করতে দেয় - যখন সেগুলি প্রথম শুরু করা হয়। এই মানগুলিতে আর কোনও আপডেট অগ্রাহ্য করা হবে। যে জিনিসগুলি রেন্ডার হওয়ার পরে পরিবর্তিত হবে না সেগুলির জন্য পৃষ্ঠাতে ঘড়ির সংখ্যা হ্রাস করার এটি দুর্দান্ত উপায়।
ব্যবহারের উদাহরণ:
<div bo-text="value"></div>
যখন valueএটির মতো ব্যবহার করা হয়, নীচের সম্পত্তিটি একবার এটি উপলভ্য হয়ে গেলে সেট করা হবে তবে তারপরে ঘড়িটি অক্ষম করা হবে।
$resource।
@ ওভারজিলিয়াস এবং @ কনর জবাবগুলির মধ্যে তুলনা:
কৌণিকের gতিহ্যগত এনজিআরপিট সহ: 2000 সারিগুলির 15s এবং র্যামের 420 মিমি ( প্লাঙ্কার )
এনজিআরপিট এবং @ ওভারজিলিয়াসের মডিউল সহ: 2000 সারিগুলির জন্য 7s এবং র্যামের 240 মিমো ( প্লঙ্কার )
এনজিপিপিট এবং @ কননারের নির্দেশনা সহ: 2000 সারিগুলির জন্য 8s এবং র্যামের 500 মিমি ( প্লঙ্কার )
আমি গুগল ক্রোম 32 দিয়ে আমার পরীক্ষা করেছি।
angular-onceতুলনা করতে ভাল লাগবে । ধন্যবাদ
angular-onceপ্যাকেজ অন্তর্ভুক্ত করতে ভুলবেন না (আমি এটি বিকল্প বিকল্প হিসাবে এখানে পোস্ট করেছি)।
বিকল্প হিসাবে, angular-onceপ্যাকেজ রয়েছে:
আপনি যদি AngularJS ব্যবহার করেন, পারফরম্যান্সের সমস্যা রয়েছে এবং প্রচুর পরিমাণে পঠনযোগ্য ডেটা প্রদর্শন করা প্রয়োজন, এই প্রকল্পটি আপনার জন্য!
angular-onceআসলে অনুপ্রাণিত হয়েছিল bindonceএবং অনুরূপ once-*বৈশিষ্ট্য সরবরাহ করে:
<ul>
<li ng-repeat="user in users">
<a once-href="user.profileUrl" once-text="user.name"></a>
<a once-href="user.profileUrl"><img once-src="user.avatarUrl"></a>
<div once-class="{'formatted': user.description}" once-bind="user.description"></div>
</li>
</ul>