事件属性检查器

Events property inspector

本文关键字：检查属性事件更新时间：2023-09-26

我想做一个像IDE一样的属性检查器。下面是我的代码(还在开发中):

var PropertiesWindow = function(divId, title) {
            this.propList = new Array();
            this.postfix = new Date().getTime();
            this.observedObject = null;
            
            this.containerDiv = divId;
            this.propIdSufix = 'prop_';
            title = title != undefined ? title : 'Properties';
            // create the header element
            var header = document.createElement('div');
            // set same style
            header.id = 'prop-header'+this.postfix;
            header.innerHTML = format('<span>{0}</span>', title);
            document.getElementById(divId).appendChild(header);
            this.domElement = document.getElementById(this.containerDiv);
            // set style
        };
        PropertiesWindow.prototype.propertyValueChanged = function(ev){
            if(ev!=null && this.observedObject!=null){              
                var propName = ev.target.id.split('_')[0];
                this.observedObject[propName] = ev.target.value;
            }
        };
        
        PropertiesWindow.prototype.attachProp = function(id, description,
                editor) {
            if (this.domElement != null) {
                var content = '<label style="margin-left:7px;margin-bottom:7px;float:left;">{0}</label><input id="{1}" type="text" style="border: solid 1px #aaaaaa;float:right;margin-right:7px;width: 70px;" />';
                content = format(content, description, id+'_'+this.postfix);
                var divElement = document.createElement('div');
                
                divElement.id = this.propIdSufix + id;
                divElement.style.clear = 'both';
                divElement.innerHTML = content;             
                this.propList.push(id);
                this.domElement.appendChild(divElement);
                document.getElementById(id+'_'+this.postfix).addEventListener('keyup', this.propertyValueChanged, false);
            }
        };
        
        PropertiesWindow.prototype.removeProp = function(id) {
            if (this.domElement != null) {
                var propId = this.propIdSufix + id;
                var innerElement = document.getElementById(propId);// this.findProp(propId);
                if (innerElement != null)
                    this.domElement.removeChild(innerElement);
            }
        };

        PropertiesWindow.prototype.subscribe = function(obj) {
            obj.setListener(this);
            this.observedObject = obj;
            for ( var propName in obj) {
                var propElement = document.getElementById(propName+'_'+this.postfix);
                if (typeof (obj[propName]) != "undefined"
                        && propElement != null) {
                    propElement.value=obj[propName];
                }
            }
        };
        
        PropertiesWindow.prototype.update = function(pname,val) {
                var propElement = document.getElementById(pname+'_'+this.postfix);
                if(propElement!=null)
                    propElement.value = val;
    };

我对方法attachProp有一个问题。我有这样的代码:

document.getElementById(id+'_'+this.postfix).addEventListener('keyup', this.propertyValueChanged, false);

我在对象propertyValueChanged中定义了一个方法但是，当它被解雇时，我无法访问PropertiesWindow的属性。我知道这是另一种情况。有什么方法可以访问PropertiesWindow的属性吗?

:

if(ev!=null && this.observedObject!=null){              
                var propName = ev.target.id.split('_')[0];
                this.observedObject[propName] = ev.target.value;
            }

this.observedObject是undefined

var self = this;
document.getElementById(id+'_'+this.postfix).addEventListener('keyup', function(evt) {
    self.propertyValueChanged(evt);
}, false);