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
Post a Comment