【问题标题】:Have sibling views re-render from a Marionette childview让同级视图从 Marionette 子视图重新渲染
【发布时间】:2014-01-29 10:21:50
【问题描述】:

我有一个非常标准的 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 完成之前让整个集合重新渲染吗?

【问题讨论】:

    标签: backbone.js marionette


    【解决方案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
        }
      });
    

    如果有更好的方法来做到这一点,我很想听听!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多