只有一條路由的backbone.js歷史？

Question

我正在開發我的第一個骨幹項目，我要求我不確定如何見面。我敢肯定，解決方案有事情做，在正確的路由我的應用程序，但我不知道......

App.Router = Backbone.Router.extend({ 
     initialize: function(options) { 
      this.el = options.el; 
     }, 
     routes: { 
      '': 'search', 
      'search': 'search' 
     }, 
search: function() { 
      var search = new App.SearchView(); 
      search.render(); 
     } 
} 
    }); 

我有三個觀點：

// Defines the View for the Search Form 
App.SearchView = Backbone.View.extend({ 

    initialize: function() { 
     _.bindAll(this, 'render'); 
     this.render(); 
    }, 

    template: _.template($('#search-form').html()), 
    el: $('#search-app'), 
    events: { 
     'click .n-button' : 'showResults' 
    }, 

    showResults: function() { 
     this.input = $('#search'); 
     var search = new App.ResultsSearchView(); 
     var grid = new App.GridView({ query: this.input.val() }); 
     search.render(); 
     grid.render(); 
    }, 

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

}); // App.SearchView 

//Defines the View for the Search Form when showing results 
App.ResultsSearchView = Backbone.View.extend({ 

    initialize: function() { 
     _.bindAll(this, 'render'); 
     this.render(); 
    }, 
    template: _.template($('#results-search-form').html()), 
    el: $('#search-input'), 
    render: function() { 
     $(this.el).html(this.template()); 
     return this; 
    }, 
    events: { 
     'click .n-button' : 'showResults' 
    }, 
    showResults: function() { 
     this.input = $('#search'); 
     var grid = new App.GridView({ query: this.input.val() }); 
     grid.render(); 
    }, 
    name: function() { return this.model.name(); } 

}); // App.ResultsSearchView 


// Defines the View for the Query Results 
App.GridView = Backbone.View.extend({ 
    initialize: function(options) { 
     var resultsData = new App.Results(); 
     resultsData.on("reset", function(collection) { 

     }); 

     resultsData.fetch({ 
      data: JSON.stringify({"query":this.options.query, "scope": null}), 
      type: 'POST', 
      contentType: 'application/json', 
      success: function(collection, response) { 
       $('#grid').kendoGrid({ 
        dataSource: { 
         data: response.results, 
         pageSize: 5 
        }, 
        columns: response.columns, 
        pageable: true, 
        resizable: true, 
        sortable: { 
         mode: "single", 
         allowUnsort: false 
        }, 
        dataBinding: function(e) { 

        }, 
        dataBound: function(){ 

        } 
       }); 

      }, 
      error: function(collection, response) { 
       console.log("Error: " + response.responseText); 
      } 


     }); 
     _.bindAll(this, 'render'); 
     this.render(); 
    }, 
    el: $('#search-app'), 
    template: _.template($('#results-grid').html()), 
    render: function() { 
     $(this.el).html(this.template()); 
     return this; 
    } 
}); // App.GridView 

我遇到的問題我們希望我們的用戶能夠使用後退按鈕導航回到初始搜索，並從那裏開始，能夠再次前進到他們的搜索結果。我只是不知道該怎麼做。任何援助將是一個巨大的幫助。

謝謝！

Answer 1

Backbone處理瀏覽器歷史記錄 - 您只需在啓動時調用Backbone.history.start()即可。那麼，只要你想保存當前的導航狀態，一定要致電Router.navigate。

在您的示例中，適當的時間將是用戶單擊「搜索」時。在searchView.showResults方法，而不是創建和渲染的結果來看，致電：

myRouter.navigate("results/" + this.input.val(), { trigger: true }); 

這將導致路由器去results/query路線，你必須添加：

'results/:query': 'results' 

最後，創建你的路由器內results方法，並把那裏的視圖創建邏輯：

results: function(query) { 
    var search = new App.ResultsSearchView(); 
    var grid = new App.GridView({ query: query }); 
    search.render(); 
    grid.render(); 
} 

---

• Here's a working demo - 這是一個有點難以看到的jsfiddle因爲頁面是在iFrame中，但可以確認它的工作通過按下Alt +左​​，Alt +右調用瀏覽器的後退和分別轉發。

• 而作爲對比，here's a similar demo，除了它使用單個路線。它調用router.navigate而不是trigger: true。您可以看到，使用此單線路方法，您可以導航返回;但是，您無法再前往結果視圖，因爲Backbone無法重新追蹤到達目標的步驟。

應用

var HomeView = Backbone.View.extend({ 
    initialize: function() { 
     this.render(); 
    }, 
    el: "#container", 
    events: { 
     "submit #search": "search" 
    }, 
    template: _.template($("#search-template").html()), 
    render: function() { 
     var html = this.template(); 
     this.$el.html(html); 
    }, 
    search: function(e) { 
     e.preventDefault(); 
     router.navigate("results/" + $(e.target).find("[type=text]").val(), { trigger: true }); 
    } 
}); 

var ResultsView = Backbone.View.extend({ 
    initialize: function() { 
     this.render(); 
    }, 
    el: "#container", 
    render: function() { 
     var html = "Results test: " + this.model.get("query"); 
     this.$el.html(html); 
    } 
}); 

var Router = Backbone.Router.extend({ 
    routes: { 
     "" : "search", 
     "results/:query": "results" 
    }, 

    search: function() { 
     console.log("search"); 
     var v = new HomeView(); 
    }, 
    results: function(query) { 
     console.log("results"); 
     var v = new ResultsView({ model: new Backbone.Model({ query: query }) }); 
    }  
}); 
var router = new Router(); 
Backbone.history.start(); 

HTML

<script type='text/template' id='search-template'> 
    <form id="search"> 
    <input type='text' placeholder='Enter search term' /> 
    <input type='submit' value='Search' /> 
    </form> 
</script> 

<div id="container"></div>​