0

私は最初のバックボーン プロジェクトを開発していますが、どのように満たせばよいかわからないという要件があります。解決策は、アプリを適切にルーティングすることと関係があると確信していますが、よくわかりません...

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

3 つのビューがあります。

// 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

私が抱えている問題は、ユーザーが戻るボタンを使用して最初の検索に戻り、そこから検索結果に再び移動できるようにすることです。これを行う方法がわかりません。どんな支援も大きな助けになるでしょう。

ありがとう！

4

1 に答える 1

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

  • これは実際に動作するデモです。ページが iFrame 内にあるため、JSFiddle で見るのは少し難しいですが、Alt+Left、Alt+Right を押してブラウザの前後をそれぞれ呼び出すことで、動作していることを確認できます。

  • 対照的に、単一のルートを使用することを除いて、同様のデモを次に示します。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>​
于 2012-12-05T21:54:50.900 に答える