Как использовать Marionette для повторного отображения вложенного CompositeView после разрушения дочерней модели?

Я думал, что Марионетт будет обрабатывать удаление видов уничтоженных моделей автоматически, но это не работает в моей ситуации. У меня есть CompositeView, который отображает коллекцию фильмов. У каждого фильма есть список актеров. Когда я нажимаю "Удалить фильм", он должен удалить всех связанных актеров и обновить вид с тем конкретным фильмом, который был удален. В настоящее время мое приложение уничтожает модели, но представление не обновляется. Если я обновлю страницу, фильм и связанные с ним актеры исчезнут, так что я знаю, что это разрушает модели, а не просмотры в тот момент, когда на них нажимают. Как я могу заставить Марионетку справиться с этим?

Соответствующий код контроллера:

 /* in my list_controller.js */

 MovieApp.module("ActorsApp.List", function(List, MovieApp, Backbone, Marionette, $, _){
  List.Controller = {

    listActors: function(){
      var actors = MovieApp.request("actor:entities");
      var movies = new Backbone.Collection;
      var allMovies= MovieApp.request("movie:entities");

      actors.each(function(actor) {
        movieId = actor.get("movieId");

        if (!movies.get(movieId) ){

          //console.log("Movie not found. Adding to list list.");
          movie = allMovies.get(movieId);

          selectedActors = actors.where({ movieId: movieId });

          //console.log("Selected Actors: ", selectedActors);
          movie.actors=selectedActors;

          movies.add(allMovies.get(movieId));

        }
        else {
          console.log("Movie found in list. Skipping.")

        }

      });

      var moviesListView = new List.Movies({
        collection: movies
      });

      moviesListView.on("itemview:actor:new", function(childView, model){
        MovieApp.ActorsApp.New.Controller.newActor(model);
      });

      moviesListView.on("itemview:itemview:actor:show", function(childView, model){
        MovieApp.ActorsApp.Show.Controller.showActor(model);
      });

      moviesListView.on("itemview:movie:show", function(childView, model){
        MovieApp.MoviesApp.Show.Controller.showMovie(model);
      });

      moviesListView.on("itemview:movie:delete", function(childView, model){

        childView.children.each(function(child){
          child.model.destroy();
        });

        // This removes a model from the moviesListView collection
        this.collection.remove(childView.model);  

        this.render();

      });

      moviesListView.on("itemview:itemview:actor:delete", function(childView, model){
        model.model.destroy();
      });

      moviesListView.on("movie:list", function(){
        MovieApp.MoviesApp.List.Controller.listMovies();
      });

      MovieApp.mainRegion.show(moviesListView);

    }


  }
});

Вот мой код просмотра:

List.Movie = Marionette.CompositeView.extend({
    tagName: "li",
    template: "#actor-movie-list-item",
    itemView: List.Actor,
    initialize: function(){

       console.log("Actors: ", this.model.actors);

        actors = this.model.actors;

        this.collection = actors;

        this.collection = new Backbone.Collection(actors);

    },

    events: {
        "click a.js-remove-movie" : "deleteClicked"
    },

    deleteClicked: function(e){
        e.preventDefault();
        e.stopPropagation();
        this.trigger("movie:delete", this.model);
    },

    appendHtml: function(collectionView, itemView, index){
        var container;

        container = this.$('.recipe-list');
        container.append(itemView.el);
    },


    onRender: function() {
        if(_.isUndefined(this.collection)){
            this.$("ul:first").remove();

        }
        console.log("Movie render called.");
    }

  });

1 ответ

Решение

Я не совсем понимаю, чего вы пытаетесь достичь, однако, если вы хотите обновить представления после уничтожения модели, попробуйте это:

recipesListView.on("itemview:movie:delete", function(childView){
    // This removes a model from the recipesListView collection
    this.collection.remove(childView.model);  
});  

Это предполагает, что ваш recipesListView является коллекционным или составным. Также проверьте: http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/

Я также создал скрипку для демонстрации использования составного вида и удаления элемента с помощью событий: http://jsfiddle.net/Cardiff/JEx6Y/

Если вышеупомянутое не поможет вам, вы можете объяснить:
- В list.view, что это this.model.actors?
- Как структурированы ваши представления (вложение типов представлений)
- Как ваши данные определены в моделях и коллекциях?

Другие вопросы по тегам