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: このコードとバックボーン ビューに関する私の理解は大丈夫ですか? 私はコースから外れていますか？

4

2 に答える 2

0

回答

  1. ビューを #panel-holder 要素に追加できるように、それ自体を返す render メソッドを含めます。
  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: このコードとバックボーン ビューに関する私の理解は大丈夫ですか? 私はコースから外れていますか？

あなたは完璧にうまくやっています。しかし、物事はバックボーンにあり、多くの方法でタスクを完了させることができます。そして、それらの中から最適なアプローチを選択する必要があります。一緒に仕事をすればするほどわかるようになります。だから心配しないでください。

同じことを、トグルを処理する単一のメソッドに凝縮できます

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 に答える