如何跨文件访问jQuery小部件选项？

我正在编写一个HTML编辑器，用户可以从工具箱中拖放元素来构建页面

当用户删除一个元素（比如一个按钮）时，我希望一个面板显示该按钮的所有可配置选项（按钮文本、颜色、边框半径等）

目前，也许这是错误的，我已经在一个按钮小部件中定义了所有这些选项

我想创建一个

panel.js

文件，该文件将输入画布上的任何元素，查看该元素的小部件选项，并将相应的表单元素呈现到该元素的编辑面板中。因此，

panel.js

会看到一个按钮被添加到页面中，会在其选项处查看

button.js

，并添加复选框和输入字段，以允许用户根据这些选项的定义（布尔、字符串、数组）自定义按钮

为了做到这一点，我需要

panel.js

能够查看/计算

button.js

中定义的选项

如何获取这些选项的列表并知道它们的关联值是布尔值、字符串还是数组？下面的小部件代码（可能是错误的…这是我第一次）：

---

您可以尝试以下方法：

稍微修改一下你的

nt.按钮。在
\u setOption:
中进行了更改，如
var self=this.element
和
函数操作（值，小部件）

现在，在需要检测按钮小部件选项的其他代码中，以下代码可能很有用：

var buttonOptions = $.nt.button.prototype.options;
        for(var i in buttonOptions) {
             if (buttonOptions.hasOwnProperty(i)) {
                if(buttonOptions[i] != null)
                    $("div.options").append("<div>Option Name: <b>"+i+"</b> , Default Value: <b>"+ buttonOptions[i] + "</b>, Type: <b>"+ typeof buttonOptions[i]+"</b></div></br>")
            }
        }


$.widget（'nt.button'{
选项：{
按钮文字：“按钮”，
以色列：是的，
第一：错，
哈斯：是的，
操作：“警报（'Clicked！'）”
},
_创建：函数（）{
这是一个选项({
“buttonText”：this.options.buttonText，
“isRaised”：this.options.isRaised，
“isPrimary”：this.options.isPrimary，
“hasRipple”：this.options.hasRipple，
“操作”：this.options.action，
});
},
_销毁：函数（）{
this.element.find（'.legend'）.empty（）；
这个；
},
_设置选项：功能（键、值）{
var self=this.element，
prev=此。选项[键]，
fnMap={
'buttonText'：函数（）{buttonText（值，self）；}，
“isRaised”：函数（）{isRaised（value，self）；}，
“isPrimary”：函数（）{isPrimary（value，self）；}，
'hasRipple'：函数（）{hasRipple（value，self）；}，
'action'：函数（）{action（value，self）；}
};
//基地
此._super（键、值）；
如果（输入fnMap）{
fnMap[key]（）；
此.\u触发器选项已更改（键、上一个、值）；
}
},
_triggerOptionChanged：函数（optionKey、previousValue、currentValue）{
此._触发器（'setOption'，{type:'setOption'}{
选项：optionKey，
上一个：上一个值，
电流：电流值
});
}
});
函数按钮文本（值，小部件）{
文本（值）；
}
功能被提升（值、小部件）{
如果（值===true）{
addClass（“mdl按钮--凸起”）
}
如果（值===false）{
返回；
}
}
函数isPrimary（值、小部件）{
如果（值===true）{
addClass（“mdl按钮——主”）；
}
如果（值===false）{
返回；
}
}
函数hasRipple（值、小部件）{
如果（值===true）{
addClass（“mdl js涟漪效应”）；
}
如果（值===false）{
返回；
}
}
函数操作（值、小部件）{
widget.unbind（“单击”）；
bind（“单击”，function（）{eval（value）}）；
}
单击以更改选项
按钮小部件具有以下选项：

可以创建stacksnippets，jsfiddle来演示吗？为什么不让按钮本身告诉您它得到了什么？有点像一个getOptions方法，它返回一个options-object的名称和值类型数组。这是巨大的帮助，让我非常接近我需要的位置。最后一个问题：让我们让小部件选项面板正确显示按钮选项的所有适当字段。然后如何将它们写回页面上的[button]小部件以“保存”它们？很高兴知道这对您有所帮助。我已经更新了回答您问题的代码片段。我们可以通过调用
$（“.mybutton”）.data（“ntButton”）.option（“buttonText”，“Updated button Text”）来更新面板“save”上按钮的默认选项。请注意，我再次对您的
函数操作（值，小部件）
做了一些小改动，以解除先前附加的单击操作的绑定并添加新的操作。非常感谢你的帮助，维杰！非常感谢您的指导！不客气，乔恩。很高兴听到这个答案帮助你实现了目标。祝你一切顺利
$.widget('nt.button', {

    options: { 
        buttonText: "Button",
        isRaised: true,
        isPrimary: false,
        hasRipple: true,
        action: "alert('Clicked!')"
    },

    _create: function () {
        this._setOptions({
            'buttonText': this.options.buttonText,
            'isRaised': this.options.isRaised,
            'isPrimary': this.options.isPrimary,
            'hasRipple': this.options.hasRipple,
            'action': this.options.action,
        });
    },

    _destroy: function () {
        this.element.find('.legend').empty();
        this._super();
    },

    _setOption: function (key, value) {
      var self = this.element,
        prev = this.options[key],
        fnMap = {
          'buttonText': function () { buttonText(value, self); },
          'isRaised': function ()   { isRaised(value, self);   },
          'isPrimary': function ()  { isPrimary(value, self);  },
          'hasRipple': function ()  { hasRipple(value, self);  },
          'action': function ()  { action(value, self);  }
        };

      // base
      this._super(key, value);

      if (key in fnMap) {
        fnMap[key]();
        this._triggerOptionChanged(key, prev, value);
      }
    },

    _triggerOptionChanged: function (optionKey, previousValue, currentValue) {
      this._trigger('setOption', {type: 'setOption'}, {
        option: optionKey,
        previous: previousValue,
        current: currentValue
      });
    }
});

function buttonText(value, widget) {
    widget.text(value);
}

function isRaised(value, widget) {
    if(value === true) {
        widget.addClass("mdl-button--raised")
    }
    if(value === false) {
        return;
    }
}

function isPrimary(value, widget) {
    if(value === true) {
        widget.addClass("mdl-button--primary");
    }
    if(value === false) {
        return;
    }
}

function hasRipple(value, widget) {
    if(value === true) {
        widget.addClass("mdl-js-ripple-effect");
    }
    if(value === false) {
        return;
    }
}

function action(value, widget) {
    widget.bind("click", function(){eval(value)});
}

var buttonOptions = $.nt.button.prototype.options;
        for(var i in buttonOptions) {
             if (buttonOptions.hasOwnProperty(i)) {
                if(buttonOptions[i] != null)
                    $("div.options").append("<div>Option Name: <b>"+i+"</b> , Default Value: <b>"+ buttonOptions[i] + "</b>, Type: <b>"+ typeof buttonOptions[i]+"</b></div></br>")
            }
        }