I'm new to Backbone so hopefully I'm just missing something simple. I'm working on building a simple survey creation/survey taking app to work through nested models, etc. I'm running a restful Rails server for the back-end.
I'm struggling with getting the survey models to save to the server though. It doesn't seem like a post request is actually happening and thus it's not actually getting updated. Any ideas what I'm missing?
Survey model:
class SurveyMe.Models.Survey extends Backbone.Model
Survey Edit View:
class SurveyMe.Views.SurveyEdit extends Backbone.View
template: JST['templates/surveys/survey_edit']
initialize: ->
@model.on('all', @render, this)
events: {
'click #back': 'back'
'submit #survey': 'update'
}
render: ->
$(@el).html(@template(survey: @model))
this
back: ->
Backbone.history.navigate("surveys",true)
update: ->
@model.set("title", $('#title').val())
@model.set("survey_limit", $('#survey_limit').val())
@model.save()
Backbone.history.navigate("surveys",true)
Survey Edit Template:
<h1>Edit Survey</h1>
<form id="survey">
<div class="input-group">
<span class="input-group-addon">Title:</span>
<input id="title" type="text" class="form-control" value="<%= @survey.get('title') %>">
<br>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Desired Responses:</span>
<input id="survey_limit" type="text" class="form-control" value="<%= @survey.get('survey_limit') %>">
<br>
</div>
<hr>
<button class="btn" id="back">Back</button>
<input type="submit" class="btn" id="update" value="Update">
</form>
EDIT: Adding Index/Router/Collection
Index:
class SurveyMe.Views.SurveysIndex extends Backbone.View
template: JST['templates/surveys/index']
events:
'submit #survey':'createSurvey'
initialize: ->
@collection.on('reset', @render, this)
@collection.on('add', @addSurvey, this)
render: ->
$(@el).html(@template())
@collection.each(@addSurvey)
console.log(@collection.length)
this
addSurvey: (survey) ->
view = new SurveyMe.Views.Survey(model: survey)
@$('#surveys').append(view.render().el)
createSurvey: ->
console.log("Survey created")
Router:
class SurveyMe.Routers.Surveys extends Backbone.Router
routes:
'surveys/:id': 'edit',
'surveys': "index"
initialize: ->
@collection = new SurveyMe.Collections.Surveys()
@collection.fetch(reset: true)
index: ->
view = new SurveyMe.Views.SurveysIndex(collection: @collection)
$("#container").html(view.render().el)
edit: (id) ->
survey = @collection.get(id)
view = new SurveyMe.Views.SurveyEdit(model: survey)
$("#container").html(view.render().el)
Collection:
class SurveyMe.Collections.Surveys extends Backbone.Collection
model: SurveyMe.Models.Survey
url: '/surveys/'
Wild guess here but it may be because you are using a simple arrow instead of a fat arrow in coffeescript:
update: ->
@title = $('#title').val()
@survey_limit = $('#survey_limit').val()
this.save()
You are getting into this method from an even, which means that this
is scoped to the event trigger rather than the model. Use the fat arrow:
update: =>
And it should be fine...