5

私はCakePHPで Web コミュニティを開発していますが、必要に応じてビューの周りに便利なウィジェットを提供するためにjQueryを使用することに疑問を持ち始めました。

たとえば、特定の入力テキスト内のデータを検索し、データベースに問い合わせて、イベントで処理される結果を取得するjQuery プラグインを作成しました。

基本的に、プラグインは単純なアプリケーションには最適ですが、ほとんどすべてのビューで使用し、毎回異なるイベントやメソッドで処理するコミュニティでは基本的に役に立たないため、巨大なイベント宣言が発生し、デバッグが非常に煩わしくなります。

ウィジェットのデフォルトのイベントを使用して問題を解決し、ビューに固有の追加のイベントを設定する可能性を追加することを考えましたが、どうすればそれを行うことができますか?

と思った状況です

ここに画像の説明を入力

画像の緑色の領域は、よくわからない場所です。必要なときに取得するデフォルトのイベントをどこに配置する必要がありますか? その後、ビューで、いくつかのイベントをウィジェットに追加して、より使いやすくすることができます。

ウィジェットの場合、すべての種類の html 部分が JavaScript を介してロードされ、対話型であることが意図されています。おそらく、結果のリストを取得する入力検索などです。

私の質問は、毎回コピーして貼り付けずに、実行時にデフォルトのイベントをウィジェットに設定するにはどうすればよいですか? 2 番目の質問は、ビューのみに特定のイベントを追加するにはどうすればよいですか?

オンラインのどこかにあるチュートリアルもいいでしょう。

4

1 に答える 1

1

私の答えには backbone.js が必要なので、これが役立つかどうかはわかりません。

ウィジェットをラッパーと実際のウィジェットに分けることができます。ラッパーは、close イベントのようなイベントを処理できます。

var WidgetWrapper = Backbone.View.extend({

  tagName:  'div',
  // This should be a mustache template:
  template: '<a class="close" href="#">close</a><div class="content"></div>',
  events: {
    '.close click':   'close',
    '.open click' :   'open'
  },
  close: {
     this.$el.hide();
  },
  open: {
     alert('I am open');
  }
  render: {
    this.$el.html(Mustache.to_html(view.template, view.model.toJSON());
  }

});

実際のウィジェットはラッパー ウィジェット内でレンダリングでき、両方のビューがデータ モデルと対話できます ( this.model)。

var SpecialWidget = Backbone.View.extend({

  tagName:  'div',

  // This should also be a mustache template:
  template: '<input> <a href="#" clas="open">open</a>',

  events: {
    'input change':   'edit'
  },

  render: function() {
    if(!this.wrapper) {
      this.wrapper = new WidgetWrapper();
    }

    // Hand over the model to the wrapper
    this.wrapper = this.model;
    // Render the wrapper
    this.wrapper.render();

    // Insert the widget content inside the wrapper
    this.$el.empty().append(this.wrapper.$el);
    this.$(".content").html(Mustache.to_html(view.template, view.model.toJSON());
  },

  edit: function() {
    alert("Changed");
  },
});

これにより、イベントを分離できます。

逆に、サブビューでラッパーを使用することもできます。

于 2013-03-21T16:46:33.567 に答える