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




(4)

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

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>

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


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


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

नॉकआउट-स्पा नॉकआउट, आवश्यकता, निदेशक, चीनी के शीर्ष पर बनाया गया एक मिनी (लेकिन पूर्णतः) एसपीए ढांचा। 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 )
  • सभी दस्तावेज प्रमुख निर्भरताओं के अपने होमपेज में हैं, ताकि आपको पूरी तरह से एक नया ढांचा सीखने की आवश्यकता न हो

हम काम पर इस पथ को शुरू कर रहे हैं, और इसलिए यह सुनिश्चित नहीं है कि हम क्या कर रहे हैं। लेकिन यहां हमारे विचार हैं।

पृष्ठ संभवतः घोंसला वाले "घटकों" की किसी भी संख्या से बना होना चाहिए। प्रत्येक घटक में एक व्यू मॉडल और एक सार्वजनिक विधि होती है, renderTo(el) , जो अनिवार्य रूप से करता है

ko.applyBindings(viewModelForThisComponent, el)

इसमें उप-संयोजक प्रस्तुत करने की क्षमता भी हो सकती है।

किसी घटक को बनाने या अपडेट करने में यह एक मॉडल (उदाहरण के लिए सर्वर से JSON डेटा) प्रदान करता है, जिसमें से यह उचित दृश्य मॉडल प्राप्त करेगा।

ऐप को फिर शीर्ष-स्तरीय एप्लिकेशन घटक से शुरू करने वाले घटकों के समूह को घोंसले से बनाया जाता है।

यहां "hypothetical" पुस्तक-प्रबंधन अनुप्रयोग के लिए एक उदाहरण दिया गया है। घटक LibraryUI (सभी पुस्तक शीर्षकों की एक सूची प्रदर्शित करता है) और विवरण DetailsUI (ऐप का एक अनुभाग जो किसी पुस्तक पर विवरण प्रदर्शित करता है)।

function libraryBookViewModel(book) {
  return {
    title: ko.observable(book.title),
    showDetails: function () {
      var detailsUI = new BookDetailsUI(book);
      detailsUI.renderTo(document.getElementById("book-details"));
    }
  };
}

function detailsBookViewModel(book) {
  return {
    title: ko.observable(book.title),
    author: ko.observable(book.author),
    publisher: ko.observable(book.publisher)
  };
}

function LibraryUI(books) {
  var bookViewModels = books.map(libraryBookViewModel);
  var viewModel = {
    books: ko.observableArray(bookViewModels);
  };

  this.renderTo = function (el) {
    ko.applyBindings(viewModel, el);
  };
}

function BookDetailsUI(book) {
  var viewModel = detailsBookViewModel(book);

  this.renderTo = function (el) {
    ko.applyBindings(viewModel, el);
  };
}

ध्यान दें कि showDetails फ़ंक्शन को बदलकर, हम सिंगलटन #book-details तत्व के बजाय, jQuery UI संवाद में पुस्तक विवरण कैसे प्रकट कर सकते हैं

var dialogEl = document.createElement("div");
detailsUI.renderTo(dialogEl);
$(dialogEl).dialog();

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

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

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

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

सौभाग्य!






knockout.js