Backbone-forms.js -如何从github "docs“中呈现示例中的提交按钮

Question

这是backbone-forms中的代码。现在，我想呈现一个提交按钮来验证我的文本字段和内容，这是有文档记录的，除了如何将提交按钮放到dom中。请随意投反对票，不管怎样，在我看来，这对于新手来说是很难理解的

(function($) {
    var cities = {
        'UK': ['London', 'Manchester', 'Brighton', 'Bristol'],
        'USA': ['Washington DC', 'Los Angeles', 'Austin', 'New York']
    };

    //The form
    var form1 = new Backbone.Form({
        schema: {
            country: { type: 'Select', options: ['UK', 'USA'] },
            city: { type: 'Select', options: cities.UK },
            message: { type: 'Text'}
        }
    }).render();

    form1.on('country:change', function(form1, countryEditor) {
        var country = countryEditor.getValue(),
            newOptions = cities[country];
            form1.fields.city.editor.setOptions(newOptions);

    });

    //Add it to the page
    $('body').append(form1.el);
})(jQuery);

Answer 1

你需要一个模板，我的朋友！

虽然附加它是一种方式，但你应该坚持用BBF的方式来实现按钮。你可以创建不同的模板，或者在需要的时候重用它们，从这里你可以给你的表单添加属性等等。希望这能帮到你。

查看工作演示： http://jsfiddle.net/c5QHr/116/

$(function() {

//// Set the template -----------------------------> 
Backbone.Form.setTemplates({
    customTemplate: '<form id="your-form-id">{{fieldsets}}<input id="your-form-cancel" type="reset" value="cancel" name="reset" /><input type="submit" value="submit" name="submit" />'

});

var cities = {
    'UK': ['London', 'Manchester', 'Brighton', 'Bristol'],
    'USA': ['Washington DC', 'Los Angeles', 'Austin', 'New York']
};

//The form
var form = new Backbone.Form({
    //// Use the template ----------------------------->
    template: 'customTemplate',
    schema: {
        country: { type: 'Select', options: ['UK', 'USA'] },
        city: { type: 'Select', options: cities.UK }
    }
}).render();

form.on('country:change', function(form, countryEditor) {
    var country = countryEditor.getValue(),
        newOptions = cities[country];

    form.fields.city.editor.setOptions(newOptions);
});

//Add it to the page
$('body').append(form.el);

////Do something with the buttons ----------------------------->

$("#your-form-id").submit(function(){alert('BBF Form was submitted!'); return false;});
$("#your-form-cancel").on('click',function(){alert('BBF Form was cancelled!'); });

})；

Answer 2

可以使用jQuery将提交按钮添加到表单中，如下所示

$('yourBackboneform').append("<input type='submit' value='submit' name='submit' /><input type='reset' value='reset' name='reset' />");

backbone forms的主要目的是为移动设备提供ajax驱动的自动更新功能，所以我猜他们决定默认不呈现提交表单功能