2013-02-12 26 views
6

मैं दृश्यों की स्ट्रीमिंग पेजिनेटेड सूची बना रहा हूं। हम ऐप को एक खाली संग्रह के साथ शुरू करते हैं और नियमित अंतराल पर संग्रह में आइटम जोड़ते हैं। जब संग्रह का आकार पृष्ठ_साइज विशेषता को पास करता है तो शेष मॉडल को प्रस्तुत नहीं किया जाना चाहिए, लेकिन समग्र दृश्य को क्लिक करने के लिए पृष्ठ संख्याएं जोड़नी चाहिए।Marionette.js - स्ट्रीमिंग पेजिनेशन बनाने के लिए कंपोजिट व्यू फ़ंक्शंस को हाइजैक करना

मैं एक मेरी compositeView है कि केवल वर्तमान पृष्ठ # और पृष्ठ आकार के आधार पर मेरे संग्रह में एक समारोह है कि एक इस तरह मॉडलों की सूची देता है आइटम renders के लिए समारोह प्रस्तुत करना बनाने पर योजना बना रहा हूँ:

get_page_results: function(page_number){ 
    var all_models = this.models; 

    var models_start = page_number * this.page_size; 
    var models_end = models_start + this.page_size; 

    //return array of results for that page 
    return all_models.slice(models_start,models_end); 
} 

मेरा सवाल है, क्या मुझे इसके लिए मैरियनेट के समग्र दृश्य का भी उपयोग करना चाहिए? ऐसा लगता है कि मैं जो चाहता हूं उसे पाने के लिए मैरियनेट के संग्रह की अधिकांश कार्यक्षमता को ओवरराइट करना।

हर बार मेरे संग्रह में आइटम की संख्या में परिवर्तन दो बातें अद्यतन करने की आवश्यकता:

  • itemViews संग्रह दृश्य में संयोजित दृश्य के निचले भाग में
  • पृष्ठ संख्या
+1

देख आप इसे संग्रह को देखने के साथ स्वाभाविक रूप से कर सकते हैं, तो वह बेहतर होगा। लेकिन अगर आपको इसे "हैक" करना है, तो आपको केवल अधिक बुनियादी टुकड़ों में से कुछ नया बनाने की आवश्यकता हो सकती है। ध्यान में रखना एक बात है, क्या आप पृष्ठ पर इच्छित तत्वों को शामिल करने के लिए कंपोजिट व्यू के वास्तविक "संग्रह" को बदलने में सक्षम हो सकते हैं। आप भी प्रत्येक पृष्ठ के लिए serveral compositeViews बना सकते हैं। –

उत्तर

3

मेरी मजबूत सिफारिश दृश्य परत में ऐसा नहीं करना है। आप अपने विचारों में कोड का एक टन जोड़ने जा रहे हैं, और आप कई सारे दृश्यों के बीच इस कोड को डुप्लिकेट करने जा रहे हैं (डेटा प्रदर्शित करने के लिए एक, पेज सूची और गणना के लिए एक, एक के लिए ...)।

इसके बजाय, एक संग्रह बनाने के लिए एक सजावटी पैटर्न का उपयोग करें जो जानता है कि इसे कैसे संभालना है। मैं फ़िल्टरिंग, सॉर्टिंग और पेजिंग डेटा के लिए ऐसा करता हूं, और यह बहुत अच्छी तरह से काम करता है।

उदाहरण के लिए, यहाँ कैसे मैं (यहाँ एक JSFdiddle में चल रहे: http://jsfiddle.net/derickbailey/vm7wK/) को छानने की स्थापना की है


function FilteredCollection(original){ 
    var filtered = Object.create(original); 

    filtered.filter = function(criteria){ 
     var items; 
     if (criteria){ 
      items = original.where(criteria); 
     } else { 
      items = original.models; 
     } 
     filtered.reset(items); 
    };   

    return filtered; 
} 

var stuff = new Backbone.Collection(); 

var filtered = FilteredCollection(stuff); 
var view = Backbone.View.extend({ 
    initialize: function(){ 
     this.collection.on("reset", this.render, this); 
    }, 

    render: function(){ 
     var result = this.collection.map(function(item){ return item.get("foo"); }); 
     this.$el.html(result.join(",")); 
    } 
}); 

आपके मामले में, आप इस तरह छानने कर नहीं किया जाएगा ... लेकिन पेजिंग के लिए विचार और स्ट्रीमिंग वही होगी।

आप ट्रैक करेंगे कि आप अपने "पेजिंग कोलेक्शन" में किस पृष्ठ पर हैं, और फिर जब आपका मूल संग्रह रीसेट हो या इसमें नया डेटा जोड़ा जाए, तो पेजिंग कोलेक्शन फ़ंक्शंस फिर से गणना करेगा कि कौन से डेटा को अंतिम में होना चाहिए pagedCollection उदाहरण, और उस संग्रह को आपके इच्छित डेटा के साथ रीसेट करें।

कुछ इस तरह (हालांकि यह अपरीक्षित और अधूरा है। आप कुछ विस्तार से भरने और यदि आपके ऐप की जरूरतों के लिए यह शरीर से बाहर करने की आवश्यकता होगी)


function PagingCollection(original){ 
    var paged = Object.create(original); 
    paged.currentPage = 0; 
    paged.totalPages = 0; 
    paged.pageSize = 0; 

    paged.setPageSize = function(size){ 
     paged.pageSize = size; 
    }; 

    original.on("reset", function(){ 
     paged.currentPage = 0; 
     paged.totalPages = original.length/paged.pageSize; 
     // get the models you need from "original" and then 
     // call paged.reset(models) with that list 
    }); 

    original.on("add", function(){ 
     paged.currentPage = 0; 
     paged.totalPages = original.length/paged.pageSize; 
     // get the models you need from "original" and then 
     // call paged.reset(models) with that list 
    }); 

    return paged; 
} 

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

संग्रह दृश्य बनाम कंपोजिट व्यू के संबंध में ... एक कंपोजिट व्यू एक संग्रह दृश्य (यह सीधे से फैला हुआ है) जो आपको संग्रह के चारों ओर एक मॉडल/टेम्पलेट प्रस्तुत करने की अनुमति देता है। यह बहुमत अंतर है ... वे दोनों संग्रह से निपटते हैं, और उस संग्रह से विचारों की एक सूची प्रस्तुत करते हैं।

0

हम bakcbone.marionette है कि आप उपयोगी मिल सकता है के लिए mixins का एक सेट का निर्माण किया है (https://github.com/g00fy-/marionette.generic/)

आप PaginatedMixin, एक रीढ़ संग्रह पृष्ठवार जा करने के लिए + एक PrefetchMixin, आप पारित करने के लिए की जरूरत नहीं है तो अनुमति देता है कि इस्तेमाल कर सकते हैं एक दृश्य में एक prefetched संग्रह।

केवल कोड आपको बस इतना करना होता है:

YourListView = Generic.ListView.mixin(PaginatedMixin,LoadingMixin,PrefetchMixin).extend({ 
    paginateBy:10, 
    template:"#your-list-template", 
    itemViewOptions:{template:"#your-itemview-template"}, 
    fetchPage:function(page){ 
     this.page = page; 
     return this.collection.refetch({data:{page:page}}); // your code here 
    }, 
    hasNextPage:function(){ 
     return true; // your code here 
    }, 
}); 

एक काम उदाहरण के लिए https://github.com/g00fy-/stack.reader/blob/master/js/views.js

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^