javascript - Knockout.js के साथ एक पेज ऐप को कैसे व्यवस्थित करें?




(5)

अब 2014 में, शायद आप अपने प्रारंभिक को प्रोजेक्ट को मचान करने के लिए नॉकआउट की घटक सुविधा और यमन का उपयोग करना चाहते हैं। इस वीडियो को देखें: स्टीव सैंडर्सन - Knockout.js के साथ बड़े एकल पृष्ठ अनुप्रयोगों का आर्किटेक्चरिंग

मैं ज्यादातर सोच रहा हूं कि मोडल विंडोज़ जैसी चीजों को व्यवस्थित करना, और प्रोफाइल जैसे डायनामिक पेज। क्या देखना चाहिए मॉडल में केवल एक प्रोफ़ाइल दृश्य होना चाहिए या सभी प्रोफ़ाइल लोड होनी चाहिए? यह यहाँ बहुत "साफ" प्रतीत नहीं होता है।

viewModel = {
  profile: ko.observableArray([
    new ProfileViewModel()
    //... any others loaded
  ])
, createPostModal: {
    input: ko.observable()
  , submit: //do something to submit...
  }
}

<div data-bind="foreach: profile"><!-- profile html --></div>
<div data-bind="with: createPostModal"></div>

इस तरह से बहुत संगत प्रतीत नहीं होता है। क्या कोई ऐसा व्यक्ति है जिसने नॉकआउट के साथ एक पेज ऐप बनाया है जो कुछ सलाह दे सकता है? कोड नमूने की सराहना की जाएगी।


मैंने नॉकआउट को प्रमुख घटक होने के साथ मिलकर मिनी एसपीए ढांचे को खोल दिया।

नॉकआउट-स्पा नॉकआउट, आवश्यकता, निदेशक, चीनी के शीर्ष पर बनाया गया एक मिनी (लेकिन पूर्णतः) एसपीए ढांचा। https://github.com/onlyurei/knockout-spa

लाइव डेमो: http://knockout-spa.mybluemix.net

विशेषताएं

  • रूटिंग (फ्लैटिरॉन के निदेशक पर आधारित): एचटीएमएल 5 इतिहास (पुशस्टेट) या हैश।
  • अत्यधिक संगत और पुन: प्रयोज्य: पृष्ठ-विशिष्ट जेएस में किसी पृष्ठ के लिए मॉड्यूल / घटक चुनें और वे पृष्ठ के HTML टेम्पलेट के लिए स्वतः से वायर्ड होंगे
  • एसईओ तैयार (prerender.io)
  • फास्ट एंड लाइटवेट (जेएस मिनीफाइड और गिज्ड के 85 केबी)
  • उत्पादन के लिए जेएस के लिए दो-स्तरीय बंडल का निर्माण: सामान्य मॉड्यूल जिसका उपयोग अधिकांश पृष्ठों द्वारा किया जाएगा, और पेज-विशिष्ट मॉड्यूल जो आलसी लोड होंगे
  • जेएस, सीएसएस, एचटीएमएल का आयोजन और पुन: उपयोग करने के लिए आपको सैने रहने में मदद करने के लिए संगठित फ़ोल्डर संरचना
  • नॉकआउट 3.3.0+ का उपयोग नॉकआउट के वेब घटक और कस्टम टैग के स्वाद के लिए तैयार है ( http://knockoutjs.com/documentation/component-overview.html )
  • सभी दस्तावेज प्रमुख निर्भरताओं के अपने होमपेज में हैं, ताकि आपको पूरी तरह से एक नया ढांचा सीखने की आवश्यकता न हो

वहां 3 फ्रेमवर्क हैं जो नॉकआउटज का उपयोग करके एसपीए बनाने में मदद करते हैं।

मैंने Durandal का उपयोग किया है और मुझे वास्तव में यह पसंद है। उपयोग करने में आसान है और इसमें बहुत अच्छी कॉन्फ़िगरेशन हैं ताकि आप अपने कार्यान्वयन को प्लग-इन कर सकें। इसके अलावा, Caliburn के एक ही निर्माता द्वारा बनाया गया है जो सिल्वरलाइट / Caliburn अनुप्रयोगों के निर्माण के लिए एक बहुत लोकप्रिय ढांचा था।


[अपडेट अप्रैल 5, 2013] लिखने के समय यह जवाब मान्य था। वर्तमान में मैं जाने के रास्ते के रूप में Durandal दृष्टिकोण का सुझाव भी Durandal । या यदि आप एएसपी.नेट एमवीसी का उपयोग कर रहे हैं तो जॉन पापा के हॉट तौलिया या हॉट टोवेलेट एसपीए टेम्पलेट्स की जांच करें। यह Durandal का भी उपयोग करता है।

नीचे मूल उत्तर:

मैं आपके लिए Knockout.js के बारे में फिलिप मोनेट्स 4 भाग श्रृंखला को इंगित करना चाहता हूं। वह पहला ब्लॉगर I सामना करता है जो कई उदाहरणों में अपनी उदाहरण परियोजना को विभाजित करता है। मुझे वास्तव में उनके ज्यादातर विचार पसंद हैं। एकमात्र चीज जो मुझे याद आई, वह किसी प्रकार का रिपोजिटरी / गेटवे पैटर्न का उपयोग कर AJAX / बाकी पुनर्प्राप्त संग्रह को कैसे संभालना था। यह एक अच्छा पढ़ा है।

भाग 1 से लिंक करें: http://blog.monnet-usa.com/?p=354

सौभाग्य!


मेरी सामान्य विधि है:

var require = function (src, cb) {
    cb = cb || function () {};

    var newScriptTag = document.createElement('script'),
        firstScriptTag = document.getElementsByTagName('script')[0];
    newScriptTag.src = src;
    newScriptTag.async = true;
    newScriptTag.onload = newScriptTag.onreadystatechange = function () {
        (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') && (cb());
    };
    firstScriptTag.parentNode.insertBefore(newScriptTag, firstScriptTag);
}

यह बहुत अच्छा काम करता है और मेरे लिए कोई पेज-रीलोड का उपयोग नहीं करता है। मैंने AJAX विधि (अन्य उत्तरों में से एक) की कोशिश की है लेकिन यह मेरे लिए अच्छी तरह से काम नहीं कर रहा है।

यहां बताया गया है कि कोड उन लोगों के लिए कैसे काम करता है जो उत्सुक हैं: अनिवार्य रूप से, यह URL का एक नया स्क्रिप्ट टैग (पहले के बाद) बनाता है। यह इसे एसिंक्रोनस मोड में सेट करता है, इसलिए यह शेष कोड को अवरुद्ध नहीं करता है, लेकिन जब कॉलस्टेट (सामग्री लोड होने की स्थिति) लोड हो जाती है तो कॉलबैक कॉल करता है।







javascript knockout.js