Durandal JS knockout Deferred अपडेट

Question

मुझे नॉकआउट लाइब्रेरी में स्थगित अपडेट सक्षम करते समय कोई समस्या है। मैंने Jquery डेटाटेबल्स को एक घटक के रूप में कार्यान्वित किया है, जब इस घटक में एक दृश्य में नेविगेट किया गया है, तो मैं निम्नलिखित विधियों को क्रम में बुलाया जा सकता हूं। Getview> सक्रिय> संलग्न

सब कुछ उम्मीद के रूप में काम करता है

लेकिन अगर मैं F5 दबाएँ और नहीं बल्कि एक और पेज यह टूट जाता है से इस पर नेविगेट से पृष्ठ ताज़ा करें और निम्न विधियों में कहा जाता है

Getview> सक्रिय > अटैच> गेटव्यू> सक्रिय करें> अटैच> डिटेच> डिटेच (सुनिश्चित नहीं है कि इसे अंत में दो बार क्यों कहा जाता है) और यह तोड़ता है, यूआई पर कोई टेबल शो नहीं है क्योंकि यह जो मैं बता सकता हूं उससे प्रस्तुत नहीं करता है, मुझे लगता है कि यह Durandal संक्रमण के साथ कुछ करने के लिए है और एक पृष्ठ पर नेविगेट करने और एक पृष्ठ को रीफ्रेश करने के बीच एक अंतर है जो स्ट्रॉ पर grasping था।

यह एक कम से कम वर्ग कि मेरे लिए समस्या प्रतिकृति है, ध्यान दें मुझे नहीं इस घटक मैं getView विधि का उपयोग करने JQueryDT

से कुछ गतिशील HTML में पास करना चाहते हैं के लिए एक HTML फ़ाइल है

मैं एक त्वरित नमूना बनाया समस्या को दोहराने के लिए न्यूनतम आवश्यक परियोजना के साथ परियोजना। https://bitbucket.org/dchosking1988/deferred-update-example

आपको लगता है कि पुल और इसे चलाने जब आप पेज को ताज़ा लेकिन यह अभ्यस्त आप टैब के बीच नेवीगेट अगर है कि "हैलो दुनिया" गायब हो जाएगा देखेंगे।

सामान्य चरण मैं इस मुद्दे को दोहराने के लिए इस्तेमाल किया

1) डाउनलोड नमूना परियोजना

2) परीक्षण घटक (नमूना फ़ाइल के लिए ऊपर रेपो देख)

3 जोड़ने) सक्षम आस्थगित अपडेट कर रहे हैं

4) अक्षम दृश्य कैशिंग

4) घटक के नया उदाहरण रचना की कोशिश

संपादित करता और अधिक जानकारी देने के लिए

* यह एक JQuery DataTable समस्या है, यह निम्न

तो तुम न gitRepo डाउनलोड करने के लिए है के साथ दोहराया जाता है नहीं है, यह कोड मैं कर सकता है उपर्युक्त चरणों के बाद नमूना परियोजना में समस्या को दोहराएं।

define([], 
function() { 
    var test = function() { 
     var self = this; 

     var defaultViewHtml = '<div> <h1>Hello World</h1></div>'; 
     var currentView = null; 

     self.getView = function() { 
      console.log('GetView'); 
      if (!currentView) { 
       currentView = $(defaultViewHtml)[0]; 
      } 
      return currentView; 
     }; 

     self.activate = function (activateOptions) { 
      console.log('Activate'); 
     }; 

     self.attached = function (view, parent, settings) { 
      console.log('Attatched'); 
     }; 

     self.detached = function (view, parent) { 
      console.log('Detatched'); 
     }; 
    }; 

    return test; 
}); 

तो index.html को यह एचटीएमएल जोड़े, भी index.js

<div class="whiteRow"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div data-bind="compose: { model: test }"></div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

यह हुआ है क्योंकि यह कोड फोन दो बार और दूसरे बुलाया में वर्ग का एक उदाहरण बनाने के लिए भूल जाते हैं न currentView test.js में खाली रहें, मैंने उस खिंचाव पर टिप्पणी की जहां आपने वर्तमान दृश्य और कोड कार्य सेट किया था।

self.getView = function() { 
       console.log('GetView'); 
       //if (!currentView) { 
       // currentView = $(defaultViewHtml)[0]; 
       //} 
       return currentView; 
       }; 

-

<div class="whiteRow"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div data-bind="compose: { model: test }"></div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

define([], 
function() { 
var test = function() { 
    var self = this; 

    var defaultViewHtml = '<div> <h1>Hello World</h1></div>'; 
    var currentView = null; 

    self.getView = function() { 
      console.log('GetView'); 
      return currentView; 
      }; 

    self.activate = function (activateOptions) { 
     console.log('Activate'); 
    }; 

    self.attached = function (view, parent, settings) { 
     console.log('Attatched'); 
    }; 

    self.detached = function (view, parent) { 
     console.log('Detatched'); 
    }; 
    }; 

    return test; 
}); 

, test.js में खाली रहने currentView