Backbone Marionette - 如何渲染CompositeView-> CollectionView-> ItemView

我想呈現我的Marionette應用程序中的事件部分。我已經採用了包含我的CollectionView的複合視圖的方法。Backbone Marionette - 如何渲染CompositeView-> CollectionView-> ItemView

我在想，CompositeView將呈現CollectionView，然後CollectionView將呈現我的ItemViews（事件）列表。

目前，CompositeView呈現CollectionView，但沒有ItemView被實例化或呈現。

這是我第一次Marrionette應用程序。我正在使用節點作爲dep。管理。咕咕地建立，瀏覽，和巴貝爾。我跟着這個項目，讓一切都變得如此遙遠：https://github.com/thejameskyle/marionette-wires

非常感謝您的幫助！謝謝！

CompositeView中

import { 
    CompositeView 
} from 'backbone.marionette'; 
import { 
    CollectionView 
} from 'backbone.marionette'; 
import { 
    Collection 
} from 'backbone'; 
import template from './events-template.hbs'; 
import EventsService from '../services/events-service'; 
import EventsView from './events-view'; 
import EventModel from '../models/events-model'; 
import EventsCollection from '../collections/events-collection'; 
export default CompositeView.extend({ 
    template: template, 
    className: 'col-md-3 calendar', 
    childViewContainer: "ul", 
    model:EventModel, 



    regions: { 
    events: '.events-list', 
    }, 
    initialize: function(){ 
    let self = this; 
    EventsService.find().then(collection => { 
     self.collection = collection; 
     console.log('Events CompositeView '+self.collection); 
     self.childView = new EventsView({collection:self.collection}); 
    }); 
    }, 

    setup(options = {}) { 
    this.container = options.container; 
    console.log("setup"); 
    }, 

    modelsChanged() { 
    console.log('Events ModelChanged' + this.model); 
    } 
});

活動，Template.hbs

<section class="panel"> 
    <div class="panel-body"> 
    <div class="monthly-stats pink"> 
     <div class="clearfix"> 
     <h4 class="pull-left">Calendar</h4> 
     <!-- Nav tabs --> 
     <div class="btn-group pull-right stat-tab"> 
      <a href="#line-chart" class="btn stat-btn active" data-toggle="tab">Week</a> 
      <a href="#bar-chart" class="btn stat-btn" data-toggle="tab">Month</a> 
     </div> 
     </div> 
    </div> 
    <div class="events-list"> 

    </div> 
    </div> 
</section>

的CollectionView

import { 
    CollectionView 
} from 'backbone.marionette'; 
import { 
    Collection 
} from 'backbone'; 
import EventView from './event-view'; 
export default CollectionView.extend({ 
    tagName: 'ul', 
    childView: EventView, 
    childViewContainer: '.events-list', 

    getChildView: function(item) { 
    console.log('ChildView' +item); 
    }, 

    initialize: function() { 
    console.log('EVENTs CollectionView '+this.collection); 
    for(let val of this.collection.models) { 
     console.log(val.attributes); 
    } 
    }, 
    onBeforeRender: function() { 
    console.log('Before EVENT CollectionView '+this.collection); 
    }, 
    collectionEvents: { 
    all: 'render' 
    }, 
    childEvents: { 
    // This callback will be called whenever a child is rendered or emits a `render` event 
    render: function() { 
     console.log('A child view has been rendered.'); 
    } 
    } 
});

ItemView //所有登錄itemView只是看看是否有任何東西被調用。它不是。

import { 
    ItemView 
} from 'backbone.marionette'; 
import { 
    Collection 
} from 'backbone'; 
import template from './event-template.hbs'; 


export default ItemView.extend({ 
    template: template, 
    tagName:'div', 
    className: 'col-md-3', 
    attributes() { 

    }, 
    onShow: function() { 
     console.log('Single EVENT'); 
    }, 
    initialize: function(o) { 
    console.log('init itemView'); 
    }, 
    show() { 
    console.log("ITEM"); 
    }, 
    modelEvents: { 
    all: 'render' 
    }, 
    onBeforeRender() { 
    console.log("EVENZT VIEW"); 
    }, 
    render() { 
    console.log("EVENZT VIEW"); 

    }, 
    modelsChanged() { 
    console.log('Events ModelChanged' + this.model); 

    } 
});

事件Template.hbs

<div class="alert alert-info clearfix"> 
     <span class="alert-icon"><i class="fa fa-envelope-o"></i></span> 
     <div class="notification-info"> 
     <ul class="clearfix notification-meta"> 
      <li class="pull-left notification-sender"><span><a href="#">{{eventName}}</a></span></li> 
     </ul> 
     <p> 
      <span>{{program}}</span><span> 
     </p> 
     </div> 
    </div>

來源

2017-06-07 user1026498

'CompositeView'是'CollectionView'的擴展 - 你不需要兩者。只需將您的集合與必要的選項（如「childView」和「childViewOptions」）一起傳遞到「CompositeView」中。 –

謝謝！現在，等待呈現項目視圖直到CollectionView集合被填充。 – user1026498

由於@J。 Titus已經評論過，您可以使用CompositeView或CollectionView。

我推薦使用CollectionView，因爲您只需要區域來顯示列表模型視圖。

關於你的收藏的事情是你永遠不會在你的代碼中填充它。當你創建一個新的集合時，除非你專門傳遞了一個模型數組，否則它是空的。所以你需要撥打.fetch()或.reset()（我建議後者首次使用，並一次獲得很多模型）。

由於在您的collectionEvents中，您正在捕獲所有事件並對其進行渲染，視圖在模型加載完成時應該自行更新。

來源

2017-06-08 11:04:24 vassiliskrikonis

添加到評論哪個@J。提多發，你問如何等到的CollectionView的所有ItemViews呈現，您可以使用此：

var ItemView = Backbone.Marionette.ItemView.extend({ 
    onShow: function() { 
     this.trigger('childOnShow'); 
    } 
}); 

var View = Backbone.Marionette.CollectionView.extend({ 
    childView: ItemView, 
    childEvents: { 
     'childOnShow': 'onChildShowHandler' 
    }, 
    onChildShowHandler: function() { 
     this.count++; 
     if (this.count === this.collection.length) { 
      // call your function here 
     } 
    }, 
    onShow: function() { 
     this.count = 0; 
    } 
});

希望這將解決您的問題。

來源

2017-10-26 09:26:34 breakpoint

Backbone Marionette - 如何渲染CompositeView-> CollectionView-> ItemView

回答

相關問題