0

次のようなマウスクリックイベントをリッスンしているバックボーンビューがあります。

...[code before]...
events: {
   mousedown: "catchMouseClick"
},
...[code after]...

「catchMouseClick」で、このような新しいビューを作成します

...[code before]...
catchMouseClick: function(e) {
    //Initialize RightClickMenu
    this.rightClickMenu = new RightClickMenu({mouseX:e.pageX,mouseY:e.pageY});
    this.rightClickMenu.remove();                        
},
...[code after]...

ご覧のとおり、マウス クリック イベント「e」の pageX と pageY をパラメーターとして使用して、RightClickMenu を作成します。

最後に、RightClickMenu ビューを次に示します。

var RightClickMenu = Backbone.View.extend({
  el:$('#outerDiv'),
  render: function(){
   $(this.el).append(_.template($('#rightClickTemplate').html()));
   $('#rightClickMenuDiv').css('top',this.options.mouseY);
   $('#rightClickMenuDiv').css('left',this.options.mouseX);
 }
});

ID「rightClickMenuDiv」を持つdivを持つ「rightClickTemplate」と呼ばれるテンプレートを使用します。

私の質問は、他にどのようなパスを実行できるでしょうか? この場所のソース コードに多くの jQuery セレクターを含めたくないからです。

テンプレートでこれらのパラメーターを処理できますか? このようなもの（ソースはテストされていません）：

<script type="text/template" id="rightClickTemplate">
  <div id="rightClickMenuDiv" style="top:<%= mouseY =>, left:<%= mouseX=>">
  ...
  </div>
</script>

そのため、テンプレートの読み込み中にそれらを渡すことができました。

4

1 に答える 1

3

jquery セレクターの使用を最小限に抑え、

var RightClickMenu = Backbone.View.extend({

  el:$('#outerDiv'),

  template : _.template($('#rightClickTemplate').html()),

  render: function(){
      this.rightMenuDiv = $(this.template()).appendTo(this.el);
      this.updatePosition(this.options.mouseX, this.options.mouseY);
      return this;
  },

 updatePosition : function(x, y){
      this.rightMenuDiv.css({
           top : y,
           left : x
      });
 } 

});

マウスクリック時のupade位置のためにこれを試してください

...[code before]...
render : function(){
     this.rightClickMenu = new RightClickMenu({mouseX:0, mouseY:0});
     return this;
},

catchMouseClick: function(e) {
    //Initialize RightClickMenu
    this.rightClickMenu.updatePosition(mouseX:e.pageX,mouseY:e.pageY);                
},
...[code after].

..

于 2013-03-13T09:04:14.630 に答える