主幹更新視圖

Question

我在前端製作了一個使用Backbone的Rails應用程序。我有兩種觀點，一種是出版模式，另一種是文章模式。在發佈視圖中，有一個'createFeed'函數在用戶填寫表單並單擊按鈕時執行。當發生這種情況時，我希望數據庫得到更新，然後爲兩個視圖重新呈現。到目前爲止沒有運氣。

這裏是骨幹路由器功能，最初呈現兩種觀點：

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

這是在我的骨幹出版查看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? 
     }); 
    }); 

    } 

我已經試過我有我的路由器的家鄉函數的代碼複製到更新發布視圖時更新文章就好了，但造成問題的回調createFeed，我猜是因爲其具有視圖渲染本身來自其中一項職能。我也嘗試在視圖中包括這一點，但不起作用。

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

如何讓createFeed在將適當的數據發送到數據庫後更新兩個視圖？

任何輸入讚賞！

* UPDATE *

Rida的BENHAMMANE和喬恩·麥克米蘭感謝輸入。

我現在有更新路由器的「家」的功能，例如：

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功能，像這樣我的出版看法：

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

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

這是每喬恩的建議。它在製作帖子和呈現發佈視圖方面效果很好。當然，現在我必須編寫代碼發佈到文章並根據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

您可以使用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的默認值，否則請使用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); 
     } 

Answer 2

做到這一點的最好辦法是：

1-使用骨幹收集的sync功能來保存其狀態的服務器，而不是使用$.post()

2-綁定sync事件的意見渲染：

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

3-保持到您的收藏參考的地方，所以每當要更新與客戶端的狀態服務器，調用集合sync方法，如果COM成功完成你的觀點將被重新提交。