Objekte erstellt Beobachten

Question

mit JSON in Aurelia

Ich habe einen Strukturbaum schamlos aus erworbenen building a treeview in aurelia

groß Dies funktioniert, wenn ich Knoten auf den Baum schieben. Was ich tun möchte, ist ein JSON-Objekt analysieren und auf den Baum schieben. Dies funktioniert teilweise, da der Baum gerendert wird, aber ich Knoten mit Kindern nicht erweitern/reduzieren kann. Ich glaube, das liegt daran, dass hasChildren eine Methode und keine Eigenschaft und möglicherweise eine tiefe Bindung ist. Ich habe versucht, diese Methode in eine get-Eigenschaft zu ändern, aber ich scheine nicht in der Lage zu sein, dies zum Laufen zu bringen.

Knotenmodell Klasse

export class NodeModel { 
    public name: string; 
    public visible: boolean; 
    public children: NodeModel[]; 
    public expanded: boolean; 
    public icon: string;  

    constructor(name: string, children: NodeModel[]) 
    { 
     this.name = name; 
     this.children = children || []; 
     this.visible = true; 

     if (this.hasChildren()) { 
      this.icon = "fa fa-chevron-down"; 
      this.expanded = true; 
     } 
    } 

    hasChildren(): boolean { 
     return this.children.length > 0; 
    } 

    toggleNode(): void { 

     for (var i: number = 0; i < this.children.length; i++) { 
      this.children[i].visible = !this.children[i].visible; 
     } 

     this.expanded = !this.expanded; 

     if (this.expanded === true) { 
      this.icon = "fa fa-chevron-down"; 
     } else { 
      this.icon = "fa fa-chevron-right"; 
     } 
    } 
} 

Treeview VM

import {NodeModel} from "node-model"; 

export class T {  
    private locations: NodeModel[];  

    constructor() {   
     this.locations = []; 
     var texas = new NodeModel('Texas', 
      [new NodeModel('Houston', []), 
       new NodeModel('Austin', [])]); 

     console.log(JSON.stringify(texas)); 

     this.locations = [texas];  
    }  

    addCardiff(): void {   
     var cardiff = new NodeModel('Cardiff', 
      [new NodeModel('Cardiff Bay', [])]); 
     this.locations.push(cardiff); 
    }  

    addBristol(): void { 
     var bristol = `{"name":"Bristol","children": 
         [{"name":"Easton","children":[],"visible":true}, 
         {"name":"Eastville","children":[],"visible":true}], 
         "visible":true,"icon":"fa fa-chevron-down","expanded":true}`; 

     var d = JSON.parse(bristol); 
     this.locations.push(d); 
    } 
} 

Baumknotenkomponente

import {bindable} from 'aurelia-framework'; 

export class TreeNode { 

    @bindable current = null; 

} 

Baum Knoten Komponentensicht

<template> 
    <ul show.bind="current.visible" style="list-style-type: none;"> 
     <li> 
      <div> 
       <span if.bind="current.hasChildren()" click.trigger="current.toggleNode()" class="${current.icon}"></span> 
       <span>${current.name}</span> 
      </div> 

      <tree-node repeat.for="node of current.children" current.bind="node"></tree-node> 

     </li> 
    </ul> 
</template> 

Ansicht

<template>  
    <require from="tree-node"></require> 
    <tree-node repeat.for="node of locations" current.bind="node"></tree-node> 
    <button click.trigger="addCardiff()" class="btn btn-default">Add Cardiff</button>   
    <button click.trigger="addBristol()" class="btn btn-default">Add Bristol</button>    
</template> 

Ausgabe unter

würde Irgendwelche Ideen sehr geschätzt.

Grüße

Mike

Answer 1

Die addBristol() Methode funktioniert teilweise, weil Sie ein einfaches Javascript-Objekt drängen, kein NodeModel Objekt. Sie müssen das Objekt und seine untergeordneten Elemente in ein Objekt NodeModel konvertieren, bevor Sie es auf das Array locations schieben. Auf diese Weise können Sie hasChildren() anrufen.