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

Question

我正在尝试使用已部署的 API 将表单数据保存到服务器；但是当我单击“保存”按钮时，它会在服务器上创建一个新文档，但它不包含任何数据。我不明白它是如何工作的；我想我必须将数据传递给模型才能保存？我怎么做？我认为 View 已经与模板和模型链接了。我正在使用 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 不使用双向绑定(bind)，因此:

this.model.save();          

在您的 saveBtn 事件处理程序中为空。如果你想要实时双向绑定(bind)，你可以使用: https://github.com/theironcook/Backbone.ModelBinder或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();