Backbone, shall I use sync or JQuery? Can I listen

问题:

Rails app using Backbone on the frontend. Basically I want the user to input a string and hit a submit button. Once that button is clicked two views get updated. I have had some great help from SO users but ran into another snag. Here are the details:

I have two models, Publication and Article (with corresponding Rails models). I am using a gem (Feedzirra) to parse the RSS URL the user enters. So I send the url to /publications and using the returned data I can grab the id so I can use it as an input for the POST to /articles. Now it is time to re-render both views. At first I tried using Backbones .sync function to make the POST requests and have the view listen for the changes and update accordingly. But, since I need the data from one request so I can feed it to the next, I have to use $.post() instead of .sync. This is mainly because I do not know much about how to use .sync. Is this possible to do using .sync?

Here is the Article view in Backbone:

SimpleGoogleReader.Views.ArticlesIndex = Backbone.View.extend({

  template: JST['articles/index'],

  el: '#article',

  events:{
    'click #new_feed': 'createFeed'
  },

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

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

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

    $.post('/publications', {url: feed_url}, function(data){
      $.post('/articles/force_update', {url: feed_url, publication_id: data.id}, function(data){
        var publications = new SimpleGoogleReader.Collections.Publications();
        publications.fetch({
          success: function(publications){
            var view = new SimpleGoogleReader.Views.PublicationsIndex({model: publications});
            view.render();
          }
        });
      });
    }, 'json');

  }

});

Here is my home function in the Backbone router:

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

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

    publications.fetch();
    articles.fetch();

  },

Another thing I am trying, that you can see here, is to go ahead and nest the POST requests using JQuery as opposed to Backbone's sync. Once the second one returns I re-render the publications view. Then I just have the articles view listen for the change in the publications view and update itself at that point. From what I've found I think you can only listen for Backbone's model changes and not it's view changes. Is that true?

Please advise!

回答1:

First add the following code to both of your views :

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

And in the router :

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

    articles.listenTo(publications, "sync", function(){
      // no need to create the articles again
      // var articles = new SimpleGoogleReader.Collections.Articles();

      // just fetch the articles, the `this.listenTo(this.model, "sync", this.render);`
      // will render the view for you
      articles.fetch();
    });

    publications.fetch();
  },

---

I think you have to call articles.fetch() here :

$.post('/publications', {url: feed_url}, function(data){
  $.post('/articles/force_update', {url: feed_url, publication_id: data.id}, function(data){
    var publications = new SimpleGoogleReader.Collections.Publications();
    publications.fetch({
      success: function(publications){
        var view = new SimpleGoogleReader.Views.PublicationsIndex({model: publications});
        view.render();
        // here !!!!
      }
    });
  });
}, 'json');