Question

我正在尝试在我的Marionette应用程序中渲染事件部分。我已经采用了融合包含我的CollectionView的复合视图的方法。

我认为CompositeView将呈现CollectionView，然后CollectionView将呈现我的ItemViews（事件）列表。

目前，CompositeView呈现CollectionView，但没有实例化或呈现ItemView。

这是我的第一个Marrionette应用程序。我正在使用dep的节点。管理。 Gulp构建，浏览器化和babel。我按照这个项目来完成所有工作：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>

Answer 1

添加@J的评论。 Titus制作了，你已经问过如何等待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;
    }
});

希望这能解决您的问题。

Answer 2

作为@J。 Titus已经评论过，您可以使用CompositeView或CollectionView。

我建议您使用<!DOCTYPE html> <html lang="en" ng-app="file"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="bootstrap.min.css" /> <script types="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <script types="text/javascript " src="script.js"></script> <title>Title</title> </head> <body ng-controller="PersonalDetailsController as person "> <pre> {{person | json}} </pre> <p ng-repeat="info in person.details ">{{info.forename}}</p> <form name="PersonalDetailsForm " ng-controller="DataEntryController as dataCtrl " ng-submit="dataCtrl.addPerson(dataCtrl.person) "> <pre> {{dataCtrl.person | json}} </pre> <label>Forename:</label> <input ng-model="dataCtrl.person.forename " /> <label>Surname:</label> <input ng-model="dataCtrl.person.surname " /> <input type="submit " value="submit " /> </form> </body> </html>，因为您只需要区域来显示列表模型视图。

关于你的收藏的事情是你永远不会在你的代码中填充它。当您创建新集合时，除非您专门传递模型数组，否则它是空的。因此，您需要致电CollectionView或.fetch()（我推荐后者首次使用，并同时获取大量模型）。

由于在.reset()中您正在捕获所有事件并对其进行渲染，因此视图应在模型加载后自行更新。

Backbone Marionette - 如何渲染CompositeView-＆gt; CollectionView-＆gt; ItemView

2 个答案: