knockout.js applicationbindings हवा जेएस प्रश्नों के पूरा होने के बाद

Question

प्रश्न: मैं अपने कोड को कैसे बना सकता हूं ताकि नॉकआउट बाइंडिंग लागू न हो जाएं जब तक कि व्यूमोडेल के सभी प्रश्न निष्पादित नहीं किए जाते?

अद्यतन: कुछ और शोध और प्रयोग के बाद मुझे लगता है कि किसी डिफरर्ड फ़ंक्शन की लाइनों के साथ कुछ उपयोग करना काम कर सकता है। मैंने कुछ कार्यान्वयन की कोशिश की है, हालांकि जब तक सभी क्वेरी परिणामों को संसाधित नहीं किया जाता है, तब तक यह केवल तब तक स्थगित हो जाता है जब तक क्वेरी को कॉल नहीं किया जाता है। मैं स्पष्ट रूप से यहां कुछ गलत कर रहा हूं लेकिन मेरा जावास्क्रिप्ट फू कमजोर है।

टेक्नोलॉजीज का प्रयोग किया: इकाई की रूपरेखा 5 डब्ल्यू/ओरेकल, नेट 4 जाल एपीआई, 2.2 नॉकआउट, हवा 0.71.3

स्थिति: ब्रीज एक वेब एपीआई विधि है जो पुन: प्राप्त करता कॉल करने के लिए किया जा रहा है पीओसीओ की एक संख्यात्मक, एक नॉकआउट अवलोकन योग्य सरणी को पॉप्युलेट करता है, और सरणी दृश्य में एक चुनिंदा नियंत्रण के लिए बाध्य है।

समस्या: हवा की क्वेरी पूरी नहीं हुई है और व्यूमोडेल बाइंडिंग को दृश्य में लागू करने से पहले नॉकआउट अवलोकनों को पॉप्युलेट नहीं किया गया है। जब क्वेरी परिणाम लौटाए जाते हैं, तो यूआई 5 से 7 सेकेंड के लिए उत्तरदायी नहीं होता है, जबकि को देखा जा सकता है और इस प्रकार चयन नियंत्रण अद्यतन होता है। प्रवेश के आधार पर इस मुद्दे होने के लिए ... प्रतीत होता है

cshtml फ़ाइल:

<select data-bind="options: $root.brokers, value: 'id', optionsText: 'name'"> 
<script data-main="/BrokerCommission/Scripts/app/main" src="/BrokerCommission/Scripts/require.js"></script> 

main.js:

requirejs.config(
    { 
     // well-know paths to selected scripts 
     paths: { 
      'breeze': '../breeze.debug', // debug version of breeze 
      'text': '../text'// html loader plugin; see http://requirejs.org/docs/api.html#text 
     } 
    } 
); 

define(['logger', 'text', 'breeze'], function(logger) { 

require(['vm.muni'], 
function() 
{ 
    logger.info('applying bindings'); 
    ko.applyBindings(my.vm); 
}); 

vm.muni मेरी ViewModel जावास्क्रिप्ट फ़ाइल है।

getAllBrokers = function() { 
     dataservice.getBrokers() 
      .then(processBrokerQueryResults) 
      .fail(handleQueryErrors); 
    }, 

    processBrokerQueryResults = function (data) { 
     logger.info("Start loading Brokers " + Math.round(new Date().getTime()/1000)); 
     my.vm.brokers([]); 
     $.each(data.results, function (i, d) { 
      brokers.push(new my.Broker() 
       .id(d.id) 
       .name(d.name) 
      ); 
     }); 
     logger.info("End loading Brokers " + Math.round(new Date().getTime()/1000)); 
    }, 

यहाँ है dataservice.js फ़ाइल से हवा क्वेरी:: यहाँ एक विधि एक प्रश्न exec से अवगत कराया जा रहा है

function getBrokers() { 
    var query = new entityModel.EntityQuery() 
      .from("GetBrokers") 
      //.orderBy("name"); 
    return manager.executeQuery(query); 
}; 

Answer 1

कुछ विचार मेरे लिए होते हैं:

1. मैं शायद ही कभी अवलोकन योग्य में एक-एक करके धक्का दें। बहुत सारे डोम अपडेट। इसके बजाय एक अस्थायी सरणी बनाएं और इसके साथ अवलोकन योग्य अपडेट करें। मेरा मानना ​​है कि यह उस प्रदर्शन समस्या का उत्तर है जिसके बारे में आप पूछ रहे हैं।

2. विधि प्रारंभ करें जो सभी प्रारंभिक एसिंक लोड विधियों को पूरा करते समय एक वादा देता है।

3. देरी ko.applyBindingsजब तक प्रारंभ वादा सफलतापूर्वक हल करता है।

4. प्रारंभ करने के लिए प्रारंभ करने की प्रतीक्षा करते समय एक स्पलैशस्क्रीन + स्पिनर दिखाने पर विचार करें।

5. प्रारंभिकरण के दौरान बहुत कुछ न करने का प्रयास करें।

मैं आपको यह नहीं बता सकता कि इस उत्तर में इन सभी में से प्रत्येक को कैसे करना है। मैं आपको # 1 दिखाऊंगा और # 2 के लिए प्रलेखन में आपको "Fetch on Launch" का संदर्भ दूंगा। वेब खोज + प्रयोग बाकी के लिए आपके दोस्त हैं।

एक सरणी

 
processBrokerQueryResults = function (data) { 
     ... 
     var tempArray = [] 
     $.each(data.results, function (i, d) { 
      tempArray.push(dtoToBroker(d)); 
     }); 
     brokers(tempArray); 
     ... 

     // I prefer named fns to long lambdas 
     function dtoToBroker(dto) { 
      return new my.Broker() 
        .id(d.id) 
        .name(d.name); 
     } 

मैं ECMAScript 5 Array.map वाक्य रचना जो एक स्रोत सरणी के प्रत्येक तत्व के लिए एक समारोह लागू करने के बाद एक सरणी देता है का उपयोग करना चाहते साथ अद्यतन observableArray। तो मैं लिखूंगा:

 
processBrokerQueryResults = function (data) { 
     ... 
     brokers(data.results.map(dtoToBroker)); 
     ... 
}