javascript - 主干 View UI

Question

我想知道是否有更好的方法来做到这一点。

我有一些 HTML，需要附加一些事件。

问题1:它背后没有数据、模型或集合，所以我认为不需要渲染方法？

问题2:我假设它应该是主干 View ，因为它是一个需要附加代码的 UI 部分？

基本上，我拥有的是一个具有显示和隐藏功能的面板，其中显示了一些用于保存设置的复选框。当面板关闭时，它将保存复选框的状态。

这是 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>

因此上面的代码使用#panel-holder附加到 View 。

这是主干代码:

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 the panel closes get the states of the checkboxes and save them
  }
});

问题3:我应该在打开和关闭面板区域中使用 jQuery .find('') 吗？有没有更好的方法将功能附加到这些元素。

问题4:这段代码和我对 Backbone Views 的理解可以吗？我是不是偏离了方向？

Answer 1

答案

1. 我将包含一个返回自身的渲染方法，以便您可以将 View 附加到 #panel-holder 元素
2. 是的，这很好
3. 在 View 元素中工作时始终使用 $.find("")。只需对元素进行索引，以便您可以通过 this.$settings 等方式访问它们
4. 总体看起来不错

代码

这是我在 Coffeescript 中推荐的代码(抱歉我很懒):
还使用Handlebars编译模板的库

tmpl = ....all your html...

SettingsView = Backbone.View.extend

  attributes: 
   id: 'settings'

  template: Handlebars.compile tmpl

  events:
   'click #click': 'toggleContent'

  initialize:
   @toggleContent()

  showMeState: true

  toggleContent: ->
   @showMeState is false then @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 and click
   @$settings = @$el.find('#settings')
   @$click = @$el.find('#click')
   @

settings = new SettingsView
$('#panel-holder').append settings.render().el