Objekte dynamisch erweitern

[Basti]

Hi.

Wie kann ich denn am Geschicktesten an folgende Aufgabe rangehen:

Ich hab einen Datensatz für eine Komponente (quasi ein Panel in einem Editor, ein Formular, über das man an einer bestimmten Stelle im Text ein Bild, eine Galerie, einen Seminartermin etc. eingeben kann). dieser Datensatz enthält die ID der Komponente, die Version, sowie den Typ und Optionen (die erstmal unwichtig sind).

Jede Komponente wird erstmal auf die gleiche Weise gebaut und soll nun einen Bereich erhalten, in dem es Inhalte packen kann und eine Toolbar, in die über eine Schnittstelle Icons mit Funktionen gepflanzt werden können soll.

Die Inhalte des Formulars sollen entweder dynamisch nachgeladen werden (anhand von ID und Version) oder auch im Datensatz enthalten sein. Das HTML und JavaScript für die Komponente (letztlich das Formular) sollen dynamisch – je nach Komponenten-Typ nachgeladen werden.

wie kann ich nun in JavaScript so ein Komponenten-Objekt bauen, das von der konkreten Komponente (Bildergalerie, Tag-Cloud, Videoplayer etc.) erweitert wird?

Ich benutze das Framework jQuery.

Ich hab einfach keinen Ansatz, wie ich da ran soll. In PHP würde das vielleicht so aussehen:

 
$aData = array(
    array('id' => 42, 'type' => 'MyComponentClass');
);

foreach($aData as $aComponentData) {

    $sClass = $aComponentData['type'];

    $Component = new $sClass($aComponent['id']);
}

class MyComponentClass extends Component
{
    protected function init()
    {
        $BoldIcon = $this->createIcon('bold', array($this, 'doBold', false));
        $this->addToolbarIcon($BoldIcon);
    }

    protected function doBold()
    {
        $this->Selection->replace('<strong>' . $this->Selection->get() . '</strong>');
    }
}

abstract class Component
{
    protected $iId;

    public function __construct($iId)
    {
        $this->iId = $iId,
        $this->loadData($iId);
        $this->init();
    }

    protected function loadData($iId)
    {
        // ...
    }

    protected function createIcon($sId, $sImage, $mCallback, $bState = true)
    {
        return new Icon(...);
    }

    protected function addToolbarIcon(Icon $Icon)
    {
        // ...
    }
} 
  

…irgendwie so halt.

Wie löst man sowas in JavaScript?

Basti

[Neq']

Hi Basti,

ich hab hier mal etwas zurechtgehackt. Ich weiß nicht ob es eine andere und bessere Lösung für das Problem gibt, aber vielleicht ist es das was du brauchst.

function MyComponentClass() {
                
                this.init = function() {
                    alert("Function init() was called...");
                }                
                this.doBold = function() {
                    alert("Function doBold() was called...");
                }    
                
            }
            
            function Component(id) {
                
                var protectedId = id;
                alert("Construcor was called and protectedId was set to " + protectedId);
                                
                this.loadData = function() {
                    alert("Function loadData() was called...");
                }
                this.createIcon = function() {
                    alert("Function createIcon() was called...");
                }                                
            }
            
            var class= "MyComponentClass";
            var att = "42";
            
            eval(class + ".prototype = new Component('"+att+"');");
            eval("var obj = new "+class+"();");    
            obj.init();        
            obj.loadData();
            obj.createIcon();
            obj.doBold();

[Basti]

Vielen Dank!

Ich werde mir das demnächst anschauen.

Basti