Question

我有一个骨干视图，就是听这样的鼠标点击事件：

...[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”的模板，其id为“rightClickMenuDiv”。

我的问题是，我还有什么其他路径可以运行？因为我不希望在这个地方的源代码中有很多jQuery选择器。

也许我可以在模板中处理这些参数？这样的事情（来源未经测试）：

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

所以我可以在加载模板时传递它们。

Answer 1

尽量减少使用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].

...

如何在鼠标单击时更改视图中div的样式属性？

1 个答案: