backbone.js - Changing state of to do list tasks with Backbone in Rails app -


i'm new backbone , i'm making list app learn basics. right can add task , rendered in list. each task has properties name (string) , complete(boolean). i'd make when checkbox (.toggle) checked, 'complete' property changed true. have 'x' button (.destroy), when clicked should remove task database. i'm having trouble getting markcomplete , clear events work correctly. here's tasks_index.js.coffee view:

class backbonetodo.views.tasksindex extends backbone.view  template: jst['tasks/index']  events:   'submit #new_task': 'createtask'   'click .toggle': 'markcomplete'   'click .destroy': 'clear'  #i'd change complete true , put line through list item markcomplete: ->  @collection.set(complete:true)  initialize: ->   @collection.on('reset', @render, this)   @collection.on('add', @appendtask, this)   render: ->   $(@el).html(@template())   @collection.each(@appendtask)    appendtask: (task) ->   view = new backbonetodo.views.task(model: task)   $('#tasks').append(view.render().el)  createtask: (task) ->   event.preventdefault()   attributes = name: $('#new_task_name').val()   @collection.create attributes,     wait: true     success: -> $('#new_task')[0].reset()     error: @handleerror  handleerror: (task, response) ->   if response.status == 422     errors = $.parsejson(response.responsetext).errors     attribute, messages of errors       alert "#{attribute} #{message}" message in messages  #this should remove selected task database clear: (task) ->   event.preventdefault()   @collection.remove() 

this might help. here's task.js.coffee view:

class backbonetodo.views.task extends backbone.view   template: jst['tasks/task']   tagname: 'li'  render: ->   $(@el).html(@template(task: @model))   

markcomplete: (event) ->   # need somehow specific task id   # example: id = $(event.currenttarget).data('id'), if have id in dom   @collection.get(id).set(complete:true)  # have here parameter task event clear: (task) ->   event.preventdefault() # task :p   # same before: task or task id   # example:    #  taskid = $(event.currenttarget).data('id')   #  task = @collection.get(taskid)   @collection.remove(task) 

my examples depends on template.

suggestion: try use @$ instead of $, scope elements view's element, way used $


Comments

Popular posts from this blog

Perl - how to grep a block of text from a file -

delphi - How to remove all the grips on a coolbar if I have several coolbands? -

javascript - Animating array of divs; only the final element is modified -