骨干.js表单数据

Backbone.js form data

本文关键字:数据 表单 js 骨干      更新时间:2023-09-26

我一直在看 Backbone.js教程,但我仍然对如何将表单数据保存到新对象中以便稍后保存到数据库中感到困惑。

所以基本上我有一个动态生成的表单,称为"真/假",用户填写该表单以生成真假问题。现在,在提交时,我需要将该表单数据保存到对象中。希望这是有道理的。现在它只在控制台中显示一个属性.log但我需要的是代码中定义的编辑属性和默认值。非常感谢任何建议/帮助,是的,我有RTFM

(function() {
window.App = {
    Models: {},
    Collections: {},
    Views: {}
};
App.Models.TestTypes = Backbone.Model.extend({
});
App.Collections.TestTypes = Backbone.Collection.extend({
    model: App.Models.TestTypes
});
App.Views.TestTypes = Backbone.View.extend({
    el: $('div.add-btn'),
    events: {
        'click button.btn-add-tf' : 'addTrueFalse',
        'click button.btn-add-mult' : 'addMult',
        'click button.btn-add-short' : 'addShort',
        'click button.btn-add-essay' : 'addEssay'
    },
    // event handling functions
    addTrueFalse: function(e) {
        e.preventDefault();
        this.addTrueFalseForm();
        this.addTrueFalsePreview();
    },
    addTrueFalseForm: function(e) {
        $('.new-questions').append('<div class="add-question"><form action="">' +
            '<div class="remove-btn">x</div>' +
            '<span style="font-weight: normal;;"><em>True / False</em></span></p>' +
            '<label for="Question_description">Question</label><br />' +
            '<input type="text" name="question[description]" class="tf-desc" /><br />' +
            'True <input type="radio" name="question_answer[answer]" id="question_answer[correct]" value="1" />' +
            ' False <input type="radio" name="question_answer[answer]" id="question_answer[correct]" value="0" /><br />' +
            '<input type="submit" value="Save" /></form>' +
            '</div>');
    },
    addTrueFalsePreview: function(e) {
        $('#test-preview').append("<p>Preview</p>");
    }
});
App.Views.NewTestType = Backbone.View.extend({
    el: '.new-questions',
    events: {
        'submit': 'addTest'
    },
    addTest: function(e) {
        e.preventDefault();
        var addTestData = $(e.currentTarget).find('.tf-desc').val();
        var task = new App.Models.TestTypes({ description: addTestData });
        this.collection.add(task);
        console.log(task);
    }
});
var testTypesCollection = new App.Collections.TestTypes([
    {
        defaults: {
            questions: 0,
            type: "",
            description: "",
            require_review: 0,
            max_points: 0,
            is_bonus: 0,
            order: 0,
            case_sensitive: 0,
            answer: "",
            points: 0,
            is_correct: 0
        }
    }]);
var addTest = new App.Views.NewTestType({ collection: testTypesCollection });
var question = new App.Views.TestTypes({ collection: testTypesCollection });
})();

我将使用Backbone.Marionette的CompositeView/CollectionView和ItemView来完成你的想法。

如果你使用一个 PHP restful 框架来使用 Backbone,对你来说会更容易。