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);
 }
});

我使用“称为”rightClickTemplate 的模板，其 div 的 id 为“rightClickMenuDiv”。

我的问题是，我还能走什么其他路径？因为我不想在这个地方的源代码中有很多 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
      });
 } 

});

试试这个在鼠标点击时更新位置

...[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 回答