क्या Knockout.js का उपयोग कर डेटा-बाध्यकारी द्वारा पृष्ठ शीर्षक सेट करने का कोई तरीका है?

मेरे पास Title संपत्ति के साथ एक दृश्य मॉडल है। मैं उस संपत्ति का उपयोग कर पेज शीर्षक सेट करना चाहता हूं।क्या Knockout.js का उपयोग कर डेटा-बाध्यकारी द्वारा पृष्ठ शीर्षक सेट करने का कोई तरीका है?

<html> 
    <head> 
    <title data-bind="text: Title"></title> 
</head> 
<body> 
    <span data-bind="text: Title"/> <!-- this displays the title properly --> 
</body>

ब्राउज़र शीर्षक खाली/मेरी Title संपत्ति के मूल्य के बजाय डिफ़ॉल्ट है: यहाँ क्या मैं पहले से ही करने की कोशिश की है, जो काम नहीं किया है।

स्रोत

2011-12-27 Byron Sommardahl

मैं संपादन मेरा उत्तर नहीं रखना चाहते हैं - कोई मौका अपना HTML टैग काम करता है पर इस डाल? '' –

इसके अलावा, क्या आप अपनी व्यूमोडेल पर शीर्षक संपत्ति को कुछ और अधिक प्रचलित, एक अवधि की तरह बांध सकते हैं, और यह ठीक दिखाना है? –

मैंने अपना कोड थोड़ा अपडेट किया। हां, मैं सफलता के साथ अन्य स्थानों में 'शीर्षक' डेटा-बाइंड कर सकता हूं। यह केवल पृष्ठ शीर्षक है जो काम नहीं करता है। –

अपने html तत्व एक आईडी

<html id="htmlTop" xmlns="http://www.w3.org/1999/xhtml">

यह मेरे लिए काम करता देने और इसे करने के लिए अपने ViewModel लागू करने

ko.applyBindings(viewModel, document.getElementById("htmlTop"));

संपादित का प्रयास करें; मैंने अभी इस पृष्ठ को चलाया और शीर्षक ने कहा "हैलो"। टाइपो के लिए अपना कोड दो बार जांचें।

<html id="htmlTop"> <head> <title data-bind="text: title"></title> <script type='text/javascript' src='jquery.min.js'></script> <script type='text/javascript' src='knockout-1.2.1.js'></script> <script type="text/javascript"> $(function() { var viewModel = { title: "Hello" }; ko.applyBindings(viewModel, document.getElementById("htmlTop")); }); </script> </head> <body> </body> </html>

स्क्रीनशॉट:

स्रोत

2011-12-27 21:58:56

बस कोशिश की, लेकिन कोई बदलाव नहीं। –

@Byron - खेद है - मैं एक आखिरी विचार है, तो मुझे लगता है कि जलाशय हो जाएगा सूखी :) --- कैसे के बारे में एचटीएमएल तत्व गुजर संपादित –

@ByronSommardahl देखते हैं, बजाय सिर्फ दस्तावेज़? कुछ 'document.getElementsByTagName ("html")' की तरह कुछ। –

आप एक custom binding handler जो अद्यतन पर document.title सेट बना सकते हैं, तो body तत्व के लिए बाध्य जोड़ें।

स्रोत

2011-12-27 22:09:00 Douglas

का उपयोग किया है किसी भी मौके को आपने यह काम देखा है या कोई उदाहरण पोस्ट कर सकता है? –

उपरोक्त लिंक किए गए पृष्ठ पर आखिरी उदाहरण देखें, हैसफोकस एक। यह बहुत अधिक होगा, सिवाय इसके कि आपको 'init' की आवश्यकता नहीं होगी, और' अपडेट' 'document.title' को' ko.utils.unwrapObservable (value) 'में सेट करने के बजाय' if 'में सेट करेगा 'ब्लॉक – Douglas

@ डगलस के सुझाव के अनुसार, मेरी समाधान शरीर एक गणना मूल्य के लिए बाध्य में कहीं एक छिपा div जोड़ने के लिए किया गया था:

<div data-bind="text: currentPageTitle()"></div>

फिर, मूल्य गणना में, मैं document.title सेट

self.currentPageTitle = ko.computed(function() { 
    document.title = self.Title(); 
    return self.Title(); 
}, this);

यह मेरे लिए पूरी तरह से काम करता है

स्रोत

2014-06-12 21:07:18 neelsg

मेरी आँखों में, यह स्थितियों एक नमूदार सदस्यता के लिए भीख माँगता।

... 
<title>{FALL BACK TEXT}</title> 
...

देखें मॉडल

ViewModel = function() { 
    var self = this; 
    self.PageTitle = ko.observable(null); 
    self.PageTitle.subscribe(function(newValue){ document.title = self.PageTitle() }); 

    //change PageTitle to see your handy work in action 
    self.PageTitle("Hello World!"); 

};

संपादित करें:

मेरे पिछले जवाब के लिए एक संशोधन के रूप में, मैं आगे निम्नलिखित शामिल करना चाहते हैं। क्या मेरा पिछला सुझाव काम करेगा? हाँ, यह बहुत अच्छी तरह से काम करता है। हालांकि, दृश्य मॉडल के भीतर डीओएम हेरफेर स्वयं "बिल्कुल" एमवीवीएम प्रतिमान का पालन नहीं करता है। वास्तविक "सर्वोत्तम" दृष्टिकोण एक कस्टम बाध्यकारी बनाना होगा, जो एक विशेष अवलोकन के अद्यतन पर दस्तावेज़ शीर्षक सेट करता है।

... 
<title data-bind="htmlDocumentTitle: PageTitle()">{FALLBACK TEXT}</title> 
...

देखें मॉडल

ViewModel = function() { 
    var self = this; 
    self.PageTitle = ko.observable(null); 

    self.init = function(){ 
     self.PageTitle("My page title from an obersvable"); 
    }; 

    //init the viewmodel 
    self.init(); 
};

और अंत में हमारे चमकदार कस्टम नमूदार में परिवर्तन के लिए "सुन" करने के लिए

ko.bindingHandlers.htmlDocumentTitle = { 
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var fallbackTitle = "My document title"; 
     var title = ko.unwrap(valueAccessor()); 

     if(!title || title == null && title == "") 
      title = fallbackTitle; 

     document.title = title; 
    } 
};

(केवल अद्यतन कार्रवाई के उपयोग पर ध्यान दें) सबसे पहले बाध्यकारी नज़र में यह समाधान कम स्केलेबल दिखाई दे सकता है, लेकिन ध्यान रखें कि हम "कॉल()" का उपयोग करके नॉकआउट व्यू मॉडल के साथ "छद्म-विरासत" बना सकते हैं।

स्रोत

2015-05-01 21:30:28 pimbrouwers

मेरे लिए काम किया! जब आप केओ मार्कअप के साथ अपने पेज हेडर को प्रदूषित नहीं करना चाहते हैं तो यह एक विशेष रूप से आसान तरीका है जिसे केवल कुछ विशिष्ट मामलों में गतिशील रूप से उपयोग किया जा रहा है। –

आप नॉकआउट उपयोग कर सकते हैं सदस्यता लें:

function viewModel() { 
    var self = this; 

    self.title = ko.observable(null); 
    self.title.subscribe(function(newTitle) { 
     document.title = newTitle; 
    }) 
} 

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

vm.title('Hello page');

स्रोत

2016-10-13 07:07:35

क्या Knockout.js का उपयोग कर डेटा-बाध्यकारी द्वारा पृष्ठ शीर्षक सेट करने का कोई तरीका है?

उत्तर

संबंधित मुद्दे