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>

backbone.js历史只有一条路线？

1 个答案: