1

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

我有一些 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 附加到视图。

这是主干代码：

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的理解可以吗？我偏离轨道了吗？

4

2 回答 2

0

答案

  1. 我将包含一个返回自身的渲染方法，以便您可以将视图附加到 #panel-holder 元素
  2. 是的，这很好
  3. 在视图元素中工作时始终使用 $.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
于 2013-07-25T13:27:54.557 回答
0

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

于 2013-07-27T01:07:54.733 回答