Question

我有一个非常标准的Marionette Itemview和CompositeView，如下所示：

  List.LessonType = Marionette.ItemView.extend({
    template: "lesson_types/list/lesson_type",
    tagName: "tr",

    triggers: {
      "click #edit-lesson-type" : "edit:lesson:type:clicked"
    }
  });

  List.LessonTypes = Marionette.CompositeView.extend({
    template: "lesson_types/list/lesson_types",
    itemView: List.LessonType,
    itemViewContainer: "tbody"
  });

在我的控制器中我有：

lessonTypes: function( lessonTypes ) {
  var lessonTypesView;
  lessonTypesView = this.getLessonTypesView( lessonTypes );

  lessonTypesView.on( "childview:edit:lesson:type:clicked", function( child, args ) {
    // a whole bunch of jquery
  });

  App.lessonRegion.show( lessonTypesView );
},

getLessonTypesView: function( lessonTypes ) {
  return new List.LessonTypes({
    collection: lessonTypes
  });
}

所有这些JQuery基本上都可以通过向contenteditable="true"添加td来编辑子视图的el（这是一个表格行）。

当单击一行时，我希望任何恰好处于可编辑状态的其他表行返回到其原始的，不可编辑的状态。我可以以某种方式重新渲染兄弟视图，或者在JQuery完成之前重新渲染整个集合吗？

Answer 1

事实证明并不太难。我在我的控制器中添加了这个：

lessonTypes: function( lessonTypes ) {
  var lessonTypesView;
  lessonTypesView = this.getLessonTypesView( lessonTypes );

  lessonTypesView.on( "childview:edit:lesson:type:clicked", function( child, args ) {
    var model, collection;
    model = args.model;
    collection = lessonTypesView.collection;

    collection.each( function( mod ) {
      if( mod.id !== model.id ) {
        mod.trigger( "refresh" );
      }
    }, this );
    // a whole bunch of jquery
  });

  App.lessonRegion.show( lessonTypesView );
},

自定义事件会强制视图重新渲染。在视图中：

  List.LessonType = App.Views.ItemView.extend({
    template: "lesson_types/list/lesson_type",
    tagName: "tr",

    triggers: {
      "click #edit-lesson-type" : "edit:lesson:type:clicked"
    },

    modelEvents: {
      "refresh" : "render"  // listening to custom event set in the controller
    }
  });

如果有更好的方法，我很乐意听到它！

从Marionette儿童视图中重新渲染兄弟视图

1 个答案: