2014-01-29 37 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 
    } 
    }); 

如果有更好的方法來做到這一點,我很樂意聽到它!