डेटा-बाइंडिंग के बिना रेंडर मूल्य

Question

AngularJS में, मैं 2-तरह के डेटा बाइंडिंग के बिना एक मूल्य कैसे प्रस्तुत कर सकता हूं? कोई प्रदर्शन कारणों से ऐसा करना चाहता है, या किसी दिए गए समय पर एक मूल्य प्रदान कर सकता है।

निम्नलिखित उदाहरण दोनों डेटा बाइंडिंग का उपयोग करते हैं:

<div>{{value}}</div>

<div data-ng-bind="value"></div>

मैं value बिना किसी डेटा बाइंडिंग के कैसे रेंडर करूं ?

Comments

आपका इनपुट और आउटपुट क्या है plz व्याख्या

— नीतीश कुमार

आपके उदाहरण वास्तव में एक तरफ़ा डेटा बाइंडिंग हैं (मॉडल परिवर्तन -> अपडेट देखें)। ng-modelआपको दो-तरफ़ा डेटा बाइंडिंग देता है: मॉडल परिवर्तन -> अपडेट देखें, परिवर्तन देखें -> मॉडल अपडेट।

— मार्क राजकॉक

अपडेट किया गया। माफ करना, मेरा मतलब है कि मुझे कोई डेटा-बाइंडिंग नहीं चाहिए

— Blowsie

मुझे नहीं लगता कि यह प्रश्न बहुत ही भयानक है या एक पतन का पात्र है। अनावश्यक घड़ियों को रोकने के लिए डेटा बाइंडिंग को अक्षम करना वास्तव में सामान्य है।

— ओवरजेलियस

अद्यतन: इस लेख को पढ़ने वाला कोई भी व्यक्ति इस वीडियो को अत्यंत उपयोगी समझेगा। youtube.com/watch?v=zyYpHIOrk_Y

— ब्‍लॉसी

Answer 1

कोणीय 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/

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

app.directive('bindOnce', function() {
    return {
        scope: true,
        link: function( $scope, $element ) {
            setTimeout(function() {
                $scope.$destroy();
                $element.removeClass('ng-binding ng-scope');
            }, 0);
        }
    }
});

@ x0b : यदि आपके पास OCD है और आप खाली classविशेषता को हटाना चाहते हैं तो ऐसा करें

!$element.attr('class') && $element.removeAttr('class')

Comments

im अभी तक प्लगइन का परीक्षण करने के लिए, लेकिन मुझे लगता है कि AngularJS क्रोम उपकरण बाइंड-वन्स तत्व को बाइंडिंग के रूप में नहीं दिखाएगा, जहाँ आपका उदाहरण है। दिलचस्प दृष्टिकोण थियो, मैं जल्द ही दोनों दृष्टिकोणों का परीक्षण करूंगा।

— ब्‍लॉसी

इस देखें - यह बाइंडिंग के रूप में दोनों से पता चलता dl.dropboxusercontent.com/u/14037764/Development/stackoverflow/...

— Blowsie

एक शक के बिना, क्योंकि अगर एनजी-बाध्यकारी वर्ग जिसे आप आसानी से हटा सकते हैं

— iConnor

यह bindonce plugin की तुलना में बढ़िया और सरल है। मैंने स्कोप को नष्ट करने से पहले एक शर्त के लिए प्रतीक्षा करने की क्षमता जोड़ी और यह वास्तव में मददगार है। धन्यवाद।

— यारोन

@ काँवर मैं असहमत। उदाहरण के लिए, मुझे REST API से एक वीडियो ऑब्जेक्ट ($ गुंजाइश.video) प्राप्त हो रहा है और मैं वीडियो शीर्षक ($ गुंजाइश.video.title) का एकमुश्त बंधन चाहता हूं। यहां तक ​​कि अगर मैं नियंत्रक में इसे दायरे में जोड़ने के वादे को हल करता हूं, तो भी मुझे DOM पर एनजी-बाइंड = "video.title" बाइंड-एक बार घोषित करना होगा। अब, वादा पूरा होने से पहले, video.title अपरिभाषित है, और video.title परिभाषित होने से पहले स्कोप नष्ट हो जाता है। इसके लिए मेरे पास एक समाधान यह है कि तत्वों को किसी प्रकार के लोडिंग / इनिट फ्लैग, एनजी-इफ = "someLoadingFlag" में लपेट दिया जाए, लेकिन यह एक खराब पैटर्न है।

— SirTophamHatt

Answer 2

ऐसा लगता है कि एंगुलर 1.3 (बीटा 10 से शुरू) में एक बार निर्मित बंधन है:

https://docs.angularjs.org/guide/expression#one-time-binding

एक बार का बंधन

एक अभिव्यक्ति जो :: से शुरू होती है, एक बार की अभिव्यक्ति मानी जाती है। एक बार जब वे स्थिर होते हैं, तो एक बार के भाव पुनर्गणना को रोक देंगे, जो पहले पचने के बाद होता है यदि अभिव्यक्ति परिणाम एक गैर-अपरिभाषित मूल्य है (नीचे मूल्य स्थिरीकरण एल्गोरिदम देखें)।

Comments

यह बार-बार जवाब देता है। मैं आपको पर्याप्त कार्ल की प्रशंसा नहीं कर सकता! मैं इस सुविधा के आक्रामक उपयोग की अत्यधिक अनुशंसा करता हूं जहां भी यह समझ में आता है।

— XDS

वाह मैं वास्तव में खुश हूं मैंने नीचे स्क्रॉल किया। मैं कॉनर से उनके स्वीकृत उत्तर में इसका संदर्भ देने के लिए कहने जा रहा हूं।

— JSager

मेरे पास 2000 लाइनों के साथ एक टेबल / सूची है और एक बार-बाध्यकारी ऑपरेटर का उपयोग करने पर मेरा ऐप सूची को पहली बार दिखा / रेंडर करते समय बहुत धीमा हो जाता है। इतनी धीमी गति से, कि ब्राउज़र मुझे दो या तीन बार पूछता है कि क्या मैं स्क्रिप्ट को निष्पादित करना बंद करना चाहता हूं!

— बिली जी

@ billy- जी क्या आप इस मुद्दे को दर्शाते हुए एक jsfiddle या plunker पोस्ट कर सकते हैं?

— जेम्स डेली

@ जेम्स डेली: यहां "सामान्य" केस plnkr.co/edit/rCRP0T5fSgNIllx7F27y है और यहां "वन-टाइम एक्सप्रेशन" केस plnkr.co/edit --Rd5VBVjkcX3sTJYGypUr है ... लेकिन मैं इसे पुन: प्रस्तुत नहीं कर सकता। वैसे भी, यह "वन-टाइम एक्सप्रेशन" के साथ तेज़ नहीं है और मुझे अपने वातावरण में ऐसा क्यों होता है, यह जानने के लिए और अधिक जांच करनी होगी (मैं एंगुलरज के 1.3 बीटा 18 का उपयोग करता हूं)

— बिली जी

Answer 3

बाइंडोन्स मॉड्यूल का उपयोग करें । आपको JS फ़ाइल को शामिल करना होगा और इसे अपने ऐप मॉड्यूल पर निर्भरता के रूप में जोड़ना होगा:

var myApp = angular.module("myApp", ['pasvaz.bindonce']);

यह लाइब्रेरी आपको उन वस्तुओं को प्रस्तुत करने की अनुमति देती है जो केवल एक बार ही बाध्य होती हैं - जब वे पहली बार आरंभिक होती हैं। उन मूल्यों के लिए किसी भी अन्य अपडेट को अनदेखा किया जाएगा। यह उन चीजों के लिए पृष्ठ पर घड़ियों की संख्या को कम करने का एक शानदार तरीका है जो उन्हें प्रदान किए जाने के बाद बदल नहीं पाएंगे।

उपयोग उदाहरण:

<div bo-text="value"></div>

जब इस तरह का उपयोग किया जाता है, तो इसके तहत संपत्ति valueउपलब्ध होने के बाद सेट की जाएगी, लेकिन तब घड़ी अक्षम हो जाएगी।

Comments

मैं एक उत्तर लिखने वाला था "अपना खुद का निर्देश लिखो ...", लेकिन ऐसा लगता है कि किसी ने पहले से ही हमारे लिए अच्छा किया है।

— मार्क राजकोक

Bindonce पर्याप्त उपयोगी है कि इसे एक अंतर्निहित वैकल्पिक पुस्तकालय के रूप में शामिल किया जा सकता है, जैसे $resource।

— ओवरजेलियस

यह वही है जो मैं ढूंढ रहा था, हालाँकि मैं कुछ इस तरह की उम्मीद कर रहा था कि इसे कोणीय में बनाया जाएगा!

— Blowsie

Answer 4

@OverZealous और @Connor उत्तरों के बीच तुलना:

कोणीय के पारंपरिक एनकैपिट के साथ: 2000 पंक्तियों के लिए 15s और RAM ( प्लंकर ) की 420mo

NgRepeat और @OverZealous के मॉड्यूल के साथ: 2000 पंक्तियों के लिए 7s और RAM ( प्लंकर ) की 240 मी।

NgRepeat और @Connor के निर्देश के साथ: 2000 पंक्तियों के लिए 8s और RAM ( प्लंकर )

मैंने Google Chrome 32 के साथ अपने परीक्षण किए।

Comments

angular-onceतुलना करना भी अच्छा होगा । धन्यवाद।

— alecxe

@alecxe: मैंने परीक्षणों को करने की योजना बनाई जब AngularJS 1.3 का एक स्थिर निर्माण प्रकाशित किया गया।

— गेब्रियल

धन्यवाद, angular-onceपैकेज को शामिल करना न भूलें (मैंने इसे एक वैकल्पिक विकल्प के रूप में यहां पोस्ट किया है)।

— alecxe

Answer 5

एक विकल्प के रूप में, 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>