Question

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

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

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

问题2：我假设它应该是主干中的一个视图，因为它是需要代码附加到它的单个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附加到视图。

这是Backbone代码：

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

答案

我将包含一个返回自身的render方法，以便您可以将视图附加到＃panel-holder元素
是的，这很好
在视图元素中工作时，始终使用$ .find（“”）。只需索引元素，以便您可以像这样访问它们。$ settings等
看起来不好看

代码

这是我推荐的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

Answer 2

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

现在不需要。但是，如果您想要添加额外的功能，或者如果UI稍后以任何方式更改，那么您可能需要一个。

问题2：我认为它应该是主干的观点，因为它是一个需要附加代码的UI吗？

是。这是一种观点。

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

this.$el.find('#settings')完全没问题。

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

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

$('#setting')应该足够好了

问题4：这段代码和我对Backbone Views的理解是否正常？上午我离开了吗？

你做得很好。但事情是在骨干中你可以通过多种方式完成任务。而且你需要选择其中最好的方法。您将了解您使用它的次数越多。所以不要担心。

同样可以压缩成一个单独的方法来处理切换

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就足够了。

Backbone Views UI

2 个答案:

答案

代码