如何将命名空间的两个实例传递给插件选项

Question

我知道问题的标题没有意义，这是问题所在： 正如您在以下场景中看到的那样，我在具有不同参数的页面中调用generateMenu函数两次

1. generateMenu（selector1，DATA1）;

2. generateMenu（选择器2，数据2）;

但由于以下实施

MyContextNameSpace.helpers.dataBind = data;

被第二次调用说数据2覆盖。 任何建议如何纠正我的代码，使其适用于两个调用

MyContextNameSpace.helpers = {
menuItems: [{
            textKey: 'printChart',
            onclick: function () {

            }
        },  {
            separator: true
        },{
            textKey: 'downloadPNG',
            onclick: function () {
                $(this).contextMenu();
            }
        },{
            textKey: 'downloadCSV',
            onclick:function(){
                $(this).exportCSV({
                    data:MyContextNameSpace.helpers.dataBind
                });
            }
        }],
}

function generateMenu(selector,data){ 
 MyContextNameSpace.helpers.dataBind = data;
for(x in MyContextNameSpace.helpers.menuItems ){
    if(MyContextNameSpace.helpers.menuItems[x].separator){
        penserContextMenuChild.append('<hr style="margin-top:0px;margin-bottom:0px;">')
    }
    else{
        var obj = new Object();
        var obj = $("<div />",{
            click:MyContextNameSpace.helpers.menuItems[x].onclick,
            css:{
               'cursor' : 'pointer',
               'padding' : '0px 10px',
               'color' : 'rgb(48, 48, 48)',
                'font-size':'11px',
                'background':'none'
            },
            text:MyContextNameSpace.helpers.menuItems[x].textKey
        })
        penserContextMenuChild.append(obj);
    }

   // console.log(MyContextNameSpace.helpers.menuItems[x].textKey)
}
}

Answer 1

您可以创建一个简单的类来保存菜单的所有属性

菜单

var Menu = function(selector, options) {
   this.selector = selector;
   this.options = options || {};
   this.data = this.options.data || [];
   this.children = [] /*  */;
};

并添加一个render方法，例如，循环传入选项中的menuItems，并为每个项创建DOM元素

Menu.prototype.render = function() {
   var that = this,
       children = that.children,
       menuItems = that.options.menuItems || [],
       i,
       length,
       menuItem,
       $el
   ;

   for(i = 0, length = menuItems.length ; i < length ; i++) {
       menuItem = menuItems[i];

       if(menuItem.separator) {
          $el = $('<hr style="margin-top:0px;margin-bottom:0px;">');
       } else {
          $el = $('<div />', {
             click: menuItem.onclick,
             css: {
               'cursor' : 'pointer',
               'padding' : '0px 10px',
               'color' : 'rgb(48, 48, 48)',
                'font-size':'11px',
                'background':'none'
             },
             text: menuItem.textKey
          });
       }

       children.push($el);
   }

   // Render children array in the appropriate selector passed upon creation 
   $(that.selector).append(children);
};

最后，创建任意数量的菜单（实例），而不触及其他菜单的data

<强>菜单1

var menu1 = new Menu('#div1', {
   data: [],
   menuItems: [
     {
       textKey: 'printChart'
      },
     {
       separator: true
     },{
       textKey: 'downloadPNG',
       onclick: function () {
         $(this).contextMenu();
       }
     },{
       textKey: 'downloadCSV',
       onclick:function(){
          $(this).exportCSV({
            data: menu1.data
          });
       }
    }]
});

menu1.render();

<强>菜单2

var menu2 = new Menu('#div2', {
   data: [],
   menuItems: [
     {
       textKey: 'printChart'
      },
     {
       separator: true
     },{
       textKey: 'downloadPNG',
       onclick: function () {
         $(this).contextMenu();
       }
     },{
       textKey: 'downloadCSV',
       onclick:function(){
          $(this).exportCSV({
            data: menu2.data
          });
       }
    }]
});

menu2.render();

请参阅正在运行jsbin