Question

我正在前端使用Backbone创建一个Rails应用程序。我有两个视图，一个用于出版物模型，另一个用于文章模型。在“发布”视图中，有一个“createFeed”函数，当用户填写表单并单击按钮时，该函数将被执行。当发生这种情况时，我希望数据库得到更新，然后才能重新渲染两个视图。到目前为止没有运气。

这是最初呈现两个视图的Backbone Router功能：

home: function(){
    var publications = new SimpleGoogleReader.Collections.Publications();
    publications.fetch({
      success: function(publications){
        var view = new SimpleGoogleReader.Views.PublicationsIndex({model: publications});
        view.render();
      }

    });

    var articles = new SimpleGoogleReader.Collections.Articles();
    articles.fetch({
      success: function(articles){
        var view = new SimpleGoogleReader.Views.ArticlesIndex({model: articles});
        view.render();
      }
    });
  },

这是我在Backbone的发布视图中的createFeed函数。帖子请求工作正常，现在只是想弄清楚如何更新视图。

  createFeed: function(e){
    e.preventDefault();
    var feed_url = $('#new_feed_name').val();

    $.post('/publications', {url: feed_url}, function(){
      $.post('/articles/force_update', {feed_url: feed_url}, function(){
          // should I put something here?
      });
    });

  }

我已经尝试将我在路由器的home函数中的代码复制到createFeed的回调中，这样可以更新文章，但是在更新发布视图时会出现问题，我想是因为这样会让视图呈现在其中一个它的功能。我也试过在视图中包含这个但是没有工作。

initialize: function() {
  this.listenTo(this.model, "change", this.render);
},

如何让createFeed在将正确的数据发送到数据库后更新两个视图？

感谢任何输入！

*更新*

Rida BENHAMMANE和Jon McMillan感谢您的投入。

我现在更新了路由器的'home'功能：

 home: function(){
    var publications = new SimpleGoogleReader.Collections.Publications();
    var articles = new SimpleGoogleReader.Collections.Articles();
    var pubIndex = new SimpleGoogleReader.Views.PublicationsIndex({model: publications});
    var artIndex = new SimpleGoogleReader.Views.ArticlesIndex({model: articles});

    // create a method to replace the force_update post in your publications view
    articles.listenTo(publications, "add", articles.force_update);
    publications.fetch();
    articles.fetch();
  },

和createFeed函数以及我的Publication视图：

  createFeed: function(e){
    e.preventDefault();
    var feed_url = $('#new_feed_name').val();

    this.model.create({
        url: feed_url
    });
  }

这是Jon的建议。它在制作帖子和渲染出版物视图方面效果很好。当然，现在我必须编写代码来发布文章，并根据Jon的评论相应地更新它的视图。

这是我应该在文章视图中单独进行的吗？或者我可以在发布视图中的createFeed函数中执行此操作吗？如果我单独进行，那么现在我有两个视图都具有相同事件的功能吗？

解！ *

发布索引视图

  initialize: function() {
    this.listenTo(this.model, "sync", this.render);
  },

  render: function(){
    this.$el.html( this.template({publications: this.model.toJSON()}) );
    return this;
  },

  createFeed: function(e){
    e.preventDefault();
    var feed_url = $('#new_feed_name').val();
    var that = this;

    this.model.create(
      {url: feed_url},
      { success: function(data){
          $.post('/articles/force_update', {url: feed_url, publication_id: data.id}, function(data){});
        }
      }
    );

  }

出版物路由器

  home: function(){

    var publications = new SimpleGoogleReader.Collections.Publications();
    var articles = new SimpleGoogleReader.Collections.Articles();
    var pubIndex = new SimpleGoogleReader.Views.PublicationsIndex({model: publications});
    var artIndex = new SimpleGoogleReader.Views.ArticlesIndex({model: articles});

    //method to replace the force_update post in your publications view
    articles.listenTo(publications, "sync", function(){
      // var articles = new SimpleGoogleReader.Collections.Articles();
      articles.fetch( {success: function(){}} );
    });

    publications.fetch();

  },

两天后，我可以继续我的生活。大声笑。感谢输入的人!!

Answer 1

最好的方法是：

1-使用主干集合的sync功能将其状态持久保存到服务器而不是使用$.post()

2-将sync事件绑定到视图呈现：

initialize: function() {
  this.listenTo(this.model, "sync", this.render);
}

3-在某处保留对集合的引用，因此每当您想要使用客户端状态更新服务器时，请调用集合sync方法，如果成功完成，您的视图将被重新呈现。

Answer 2

您可以使用已在其他帖子中描述的sync或其他一些事件。

请参阅Collection.create()和Collection.fetch()了解哪些事件可以listenTo。

initialize: function() {
    this.listenTo(this.model, "sync", this.render);
},
createFeed: function(e){
    e.preventDefault();
    var feed_url = $('#new_feed_name').val();

    this.model.create({
        url: feed_url
    });
}

您可以在路由器中侦听add事件以触发第二个帖子。文章的视图可以监听由force_update帖子触发的一些事件，就像上面的初始化函数一样。

home: function() {
    var publications = new SimpleGoogleReader.Collections.Publications();
    var articles = new SimpleGoogleReader.Collections.Articles();
    var pubIndex = new SimpleGoogleReader.Views.PublicationsIndex({model: publications});
    var artIndex = new SimpleGoogleReader.Views.ArticlesIndex({model: articles});

    // create a method to replace the force_update post in your publications view
    articles.listenTo(publications, "add", articles.force_update);
    publications.fetch();
    articles.fetch();
}

通过收听sync，您可以删除fetch({success:fn})回调。

<强>更新

主要思想是利用Backbone的事件系统在集合和视图之间进行交流。如果标准用例适用于您，请使用Backbone的默认值，否则使用trigger("custom-event")。

在SimpleGoogleReader.Collections.Articles

的声明中

        // collection "add" event callbacks pass the model as the first n
        // param to the callback
        force_update: function(publication) {
            var data = {
                feed_url: publication.get("url")
            };

            var callback = _.bind(function() {
                this.trigger('force-update');
            }, this);

            $.post('/articles/force_update', data).done(callback);
        }
    });

在SimpleGoogleReader.Views.ArticlesIndex

内

        initialize: function() {
            this.listenTo(this.model, "force-update", this.render);
        }

骨干更新视图

2 个答案: