只有一条路线的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+Left、Alt+Right 来确认它正在工作，分别调用浏览器的后退和前进.

• 相比之下，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>​