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 </label> <input type="checkbox" id="formdisplaypopup" checked="checked"/> </li> <li> <label>play alert sound </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
- i include render method returns can append view #panel-holder element
- yes, fine
- always use $.find("") when working within view's elements. index elements can access them this.$settings, etc
- 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
Post a Comment