在Backbone中捕获表单提交

Question

我有一个URL路由，其中​​包含一个参数，其值在加载页面时未提前知道。例如：

/读/书/页/：页

但是当用户选择屏幕时，他们可以输入他们想要启动的页码，然后单击“提交”。是否可以捕获此表单提交并将其放在URL中？通常会有一个问号（？），因为它是一个GET请求。但是Backbone骨干怎么能抓到呢？

Answer 1

演示：

http://jsfiddle.net/vpetrychuk/PT2tU/

JS：

var Model = Backbone.Model.extend({
    url : function () {
        return 'http://fiddle.jshell.net/echo/json?page=' + this.get('page');
    },
    // remove it
    parse : function (response) {
        response || (response = {});
        response.justToTriggerChangeEvent = Math.random();
        return response;
    },
    getPageContent : function () {
        return 'Here should be page a content for page #' + this.get('page');
    }
});

var View = Backbone.View.extend({
    el : '[data-page]',
    events : {
        'submit' : 'submit'
    },
    initialize : function () {
        this.listenTo(this.model, 'change', this.showPage);
    },
    showPage : function () {
        this.$('[data-page-content]').html(this.model.getPageContent());
    },
    submit : function (e) {
        e.preventDefault();
        var page = this.$('[data-page-num]').val();
        if (page) {
            app.navigate('read/book/page/' + page, true);
        }
    }
});

var Router = Backbone.Router.extend({
    routes : {
        'read/book/page/:page' : 'page'
    },
    initialize : function (options) {
        this.bookModel = options.bookModel;
    },
    page : function (page) {
        this.bookModel.set('page', page);
        this.bookModel.fetch();
    }
});

var model = new Model();
var view = new View({model:model});
var app = new Router({bookModel:model});

Backbone.history.start();

HTML：

<div data-page>
    <form>
        <label><input type="text" data-page-num /></label>
        <button type="submit">Submit</button>
    </form>
    <div data-page-content></div>
</div>