Backbone.js के साथ इस वेब ऐप को कैसे बनाया जाए?

Question

मैं बैकबोन में संग्रह, मॉडल इत्यादि के आसपास अपना सिर पाने के लिए संघर्ष कर रहा हूं।

मान लीजिए कि अनुप्रयोग एक साइडबार, एक timeslider और एक स्तंभ चार्ट के होते हैं:

कुछ पृष्ठभूमि प्रदान करने के लिए, मैं पहले कार्यात्मक वंशानुक्रम स्वरूप का उपयोग कर columnChart वर्ग को क्रियान्वित किया है:

namespace.columnChart = function() { 

    var chart = {}; 

    var width = 500; 
    var height = 500; 
    var data = []; 

    chart.setState = function(state){ 
     data = state.data; 
     updateVis(); 
    } 

    function updateVis(){ 
     ... render chart based on state ... 
    } 

    return chart; 
} 

सरल बाध्यकारी के साथ मैं कॉलम चार्ट पर सेटस्टेट विधि को कॉल कर सकता हूं उदाहरण के लिए साइडबार से एक नई इकाई जोड़ना। लेकिन जैसा कि मॉडल बढ़ता है (और राज्य वर्ष, वर्तमान चयन, चार्ट टाइप आदि जैसे चर के साथ अधिक जटिल हो जाता है) - जिसे मैं यूआरएल में प्रतिबिंबित करना चाहूंगा - मैं एमवीसी और विशेष रूप से बैकबोन.जेएस का उपयोग करना चाहता हूं।

1. तो मैं इसे बैकबोन में कैसे बना सकता हूं?
   • क्या मुझे अपना कॉलम चार्ट क्लास (और इसी तरह के वर्ग) को फिर से लिखना चाहिए?
   • क्या राज्य में क्या बदल गया है और इन पैराम्स का उपयोग करके केवल नया राज्य निर्धारित करने का कोई आसान तरीका है?

साइडबार, timeslider एक साथ बांधने और स्तंभ चार्ट का एक उदाहरण - रीढ़ का उपयोग कर - बहुत सराहना की जाएगी।

धन्यवाद।

Answer 1

मैं बैकबोन का उप-वर्ग बनाउंगा। मॉडल को DataSet कहा जाता है जो चेकबॉक्स की बाईं ओर सूची में प्रत्येक आइटम का प्रतिनिधित्व करता है। इसमें showInGraph नामक बुलियन ध्वज होना चाहिए। बाएं हाथ खंड में संभावित डेटा आइटम्स के पूर्ण सेट का प्रतिनिधित्व करने के लिए आप एक बैकबोन बनाते हैं। चयन उपclass। सभी संभावनाओं के लिए अपने डेटासेट के उदाहरणों के साथ इस संग्रह को पॉप्युलेट करें। फिर प्रत्येक आइटम को 2 अलग बैकबोन मिलते हैं। उप-वर्ग देखें। एक OptionView है जो बस चेकबॉक्स प्रस्तुत करता है और चाहे वह चेक किया गया हो या नहीं (showInGraph सत्य के आधार पर HTML इनपुट तत्व की चेक की गई विशेषता को प्रस्तुत करना)। showInGraph टॉगल करने के लिए चेकबॉक्स के ऑन चेंज विशेषता को बाध्य करने के लिए एक ईवेंट हैंडलर की भी आवश्यकता होगी। बैकबोन स्वचालित रूप से उस परिवर्तन को प्रचारित करेगा और आपके लिए विचार प्रस्तुत करेगा। इसे बाएं हाथ div में प्रयोग करें और इसे सभी उपलब्ध डेटा सेटों के संग्रह से संबद्ध करें।

दूसरा दृश्य उपclass ChartView है जो चार्ट में आइटम को प्रस्तुत करता है यदि उसके showInGraph इसे सत्य मानते हैं, अन्यथा यह केवल इसे अनदेखा करता है।

इसे चरण-दर-चरण पर ले जाएं। सबसे पहले चेकबॉक्स की बाईं ओर सूची बनाएं। यह रीढ़ की हड्डी के दस्तावेज़ों के बाद सीधा होना चाहिए। फिर showInGraph पर प्रत्येक डेटा सेट के लिए <li> के साथ दाईं ओर केवल एक साधारण <ul> बनाने का प्रयास करें, लेकिन showInGraph गलत नहीं है। चार्ट से वहां जाकर ChartView व्यू में फैनसीयर प्रतिपादन का मामला है।

इसे आज़माएं और देखें कि आप कुछ प्रगति कर सकते हैं या नहीं। अगर आप अटक जाते हैं या स्पष्टीकरण की आवश्यकता होती है तो एक और टिप्पणी पोस्ट करें।