使用 handlebars js 和 marionette js 保存表单数据

Question

我正在尝试使用 Deployd 将表单数据保存到服务器 API；但是当我单击保存按钮时，它会在服务器上创建一个新文档，但它不包含任何数据。我不明白它是如何工作的；我想我必须将数据传递给要保存的模型？我怎么做？我认为视图已经与模板和模型链接在一起。我正在使用 Requirejs、MarionetteJS 和 Handlebars。这是代码。

型号：

define(['underscore','backbone'], function(_, Backbone){
var Student= Backbone.Model.extend({
  urlRoot: '/students',
  defaults: {
     nameStudent: '',
     lastnameStudent: ''
  },
  initialize: function(){
    console.log('studentModel: initiated');
  },
});
return Student;
});

查看：

define([
'jquery',
'underscore',
'backbone',
'marionette',
'handlebars',
'js/models/student',
'text!templates/forms/studentFormAdd.html'

], function($, _, Backbone, Marionette, Handlebars, studentModel, studentFormAddTemp){

    var studentFormAdd = Backbone.Marionette.ItemView.extend({
        model: studentModel,
        template: Handlebars.compile(studentFormAddTemp),   
        events: {
            'click #saveBtn': function(){
                this.model.save();          
                console.log(this.model.toJSON());
                console.log('saveBtn event: initiated');
            }
         },
        initialize: function(){
            console.log('studentFormAdd: initiated');
            this.model = new studentModel();
            this.model.on('change', this.render);
        },
    });

我的模板具有以下语法：

<div>
<form>
Student Name<br>
<input type="text" name="nameStudent" value="{{nameStudent}}" placeholder="Student name"/>
<br>
Student lastname<br>
<input type="text" name="lastnameStudent" value="{{lastnameStudent}}" placeholder="Student lastname"/><br>
</form>
</div>

Answer 1

Backbone 不使用双向绑定，所以：

this.model.save();

在您的 saveBtn 事件处理程序中是空的。如果你想要实时双向绑定，你可以使用： https://github.com/theironcook/Backbone.ModelBinder or https://github.com/NYTimes/backbone.stickit

如果您不想简单地在提交时使用表单数据并将其保存在模型中，您可以使用 https://github.com/marionettejs/backbone.syphon。

 var data = Backbone.Syphon.serialize(this);
 this.model.set(data);

 this.model.save();

使用 handlebars js 和 marionette js 保存表单数据

Save form data with handlebarsjs and marionettejs

javascript

backbone.js

handlebars.js

marionette