主干视图UI

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

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
  }
});

答案

1. 我将包含一个返回自身的render方法，以便您可以将视图附加到#panel-holder元素
2. 是的，这很好
3. 在视图的元素中工作时，始终使用$.find（"）。只需对元素进行索引，就可以这样访问它们$设置等
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

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

目前还不需要。但是，如果你想添加额外的功能，或者如果UI稍后发生任何变化，那么你可能需要一个。

问题2：我认为这应该是一个骨子里的观点，因为是一个单独的UI需要附加代码吗？

是的。这是一种观点。

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

this.$el.find('#settings')非常好。

您也可以使用$('#settings', this.$el)或this.$('#settings')

但请记住，您使用的是ID选择器。ID在页面上将是唯一的。所以你不需要在视图的上下文中找到它

$('#setting')应该是足够好的

问题4：这个代码和我对主干视图的理解可以吗？是我偏离了路线？

你做得非常好。但关键是，在骨干中，你可以通过多种方式完成任务，这是有效的。你需要从中选择最好的方法。你会越来越了解它。所以不要担心它。

同样的东西可以浓缩成一个单一的方法来处理的切换

var SettingModel = Backbone.Model.extend({
    defaults: {
        showmeState : false
    }
});
var settingModel = new SettingModel(); 
var SettingsView = Backbone.View.extend({
    el: '#panel-holder',
    events: {
        'click #click': 'toggleState'
    },
    initialize: function () {
        // Listen to the Model that triggers 
        this.listenTo(settingModel, 'change', this.toggleContent);
        this.model.trigger('change');
    },
    toggleState: function() {
        //When Clicked just negate the boolean so that it triggers the change event
        this.model.set('showmeState', !this.model.get('showmeState'));
    },
    toggleContent: function() {
        var check = !this.model.get('showmeState'),
            txt = check === true ? "Close Settings" : "Open Settings";
         $('#click').text(txt);
         check === true ? $('#settings').slideUp('fast') 
                        : $('#settings').slideDown('fast');
        if(check)
            saveSettings();
    },
    saveSettings: function () {
        //when the panel closes get the states of the checkboxes and save them
    }
});

如果你认为检查状况是一种过度的手段，那么一个简单的If就足够了。