【问题标题】：Catching form submissions in Backbone在 Backbone 中捕获表单提交
【发布时间】：2013-09-08 14:41:52
【问题描述】：

我有一个 URL 路由，该路由有一个参数，该参数的值在页面加载之前是未知的。例如：

/read/book/page/:page

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

【问题讨论】：

能否让服务器根据查询字符串重写 url？如果没有，那么只需在 javascript 中自己解析查询字符串。

标签： javascript backbone.js

【解决方案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>

【讨论】：