javascript - Backbone Views UI -


i wondering if there better way of doing this.

i have html needs events attaching it.

question 1: there no data, models or collections behind assume no need render method?

question 2: assuming should view in backbone because single piece of ui needs code attaching it?

basically have panel show , hide functionality, shows check boxes saving settings. when panel closes save states of check boxes.

here html:

<div id="panel-holder"> <div id="settings">   <ul class="settingschecks">     <li>       <label>display desktop notification popup&nbsp;</label>       <input type="checkbox" id="formdisplaypopup" checked="checked"/>     </li>                <li>       <label>play alert sound&nbsp;</label>       <input type="checkbox" id="formplaysounds" checked="checked"/>     </li>   </ul> </div> </div> 

so above code attached view using #panel-holder.

here backbone code:

var settingsview = backbone.view.extend({   el: '#panel-holder',   events: {     'click #click': 'togglecontent'   },   initialize: function() {     this.togglecontent();   },   showmestate: true,   togglecontent: function(){     if (this.showmestate === false) {       this.openpanel();     } else {       this.closepanel();     }   },   closepanel: function() {     this.$el.find('#settings').slideup('fast');//close panel     this.$el.find('#click').text("open settings");//change text     this.showmestate = false;     this.savesettings();   },     openpanel: function() {     this.$el.find('#settings').slidedown('fast');//open panel     this.$el.find('#click').text("close settings");//change text     this.showmestate = true;   },   savesettings: function() {     //when panel closes states of checkboxes , save them   } }); 

question 3: should using jquery .find('') in open , close panel areas? there better way of attaching functionality these elements.

question 4: code , understanding of backbone views ok? way off course?

answers

  1. i include render method returns can append view #panel-holder element
  2. yes, fine
  3. always use $.find("") when working within view's elements. index elements can access them this.$settings, etc
  4. no looks generally

code

here recommended code in coffeescript (sorry i'm lazy):
uses handlebars library compile templates

tmpl = ....all html...  settingsview = backbone.view.extend    attributes:     id: 'settings'    template: handlebars.compile tmpl    events:    'click #click': 'togglecontent'    initialize:    @togglecontent()    showmestate: true    togglecontent: ->    @showmestate false @openpanel()    else @closepanel()    closepanel:->    @$settings.slideup('fast')    @$click.text('open settings')    @showmestate = false    @savesettings()    openpanel: ->    @$settings.slidedown('fast')    @$click.text('close settings')    @showmestate = true    savesettings: ->    render: ->    @$el.append @template    #store settings , click    @$settings = @$el.find('#settings')    @$click = @$el.find('#click')    @  settings = new settingsview $('#panel-holder').append settings.render().el 

Comments

Popular posts from this blog

curl - PHP fsockopen help required -

HTTP/1.0 407 Proxy Authentication Required PHP -

java - More than one row with the given identifier was found: 1, for class: com.model.Diagnosis -