2014-01-29 22 views
0

我有兄弟姐妹的观点重新渲染一个相当标准的木偶ItemView控件和CompositeView中,看起来像这样:已经从木偶childview

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执行它之前重新渲染整个集合吗?

回答

2

原来不是太难。我在我的控制器中添加此:

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 
    } 
    }); 

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