HTMLBars render test

Question

Momentan baue ich eine ember.js Komponente, die 2 Modi hat, anzuzeigen und zu bearbeiten. Wenn sich die Komponente im Anzeigemodus befindet, rendert sie die Vorlagenzeichenfolge, die eine Eigenschaft eines zugeordneten Modells ist. Im Bearbeitungsmodus zeigt die Komponente die Vorlagenzeichenfolge in einem editierbaren Inhalt an. Ich musste die Komponente neu initialisieren, wenn der Modus umgeschaltet wurde, indem 2 Instanzen der Komponente in eine if/else-Anweisung der Vorlage eingefügt wurden. Der folgende Code in meiner Komponente ermöglicht dies:

`import layoutDefault from '../templates/components/positionable-element-default'` 

.....

layout:Em.computed(-> 
    if @.get('layoutComponent.displayMode') 
     Ember.HTMLBars.compile(@.get('regionModel.textContent')) 
    else 
     layoutDefault 
) 

Meine Idee für Fehler der Lösung machen die {und} Zeichen der Vorlage Zeichenfolge abzustreifen und dann neu kompilieren nach Benachrichtigung des Benutzers über den Fehler

Ich habe versucht, die Compile-Funktion in einen Versuch Catch setzen, aber nichts ist gefangen, vermutlich, weil es nicht das Kompilieren ist, das Problem, sondern das Rendering.

Nach einigen Recherchen fand ich Why Ember.onerror() not capturing the Assertion Failed error.?, aber es sieht so aus, als ob ich nie in der Lage sein werde, Behauptungsfehler in der Produktion zu fangen. Daher meine Frage ist: Ist es möglich, festzustellen, ob eine Vorlage String richtig oder nicht wird oder nicht? Oder liegt diese Funktionalität außerhalb der Möglichkeiten von ember? Pointers sehr geschätzt :)

Answer 1

Ich bin denken Sie vielleicht in der Lage sein, Ihr Problem zu lösen, indem die Komponente Helfer mit dynamisch eine Komponente angezeigt werden, haben einen Blick auf diese post für eine ausführliche Erklärung, wie es funktioniert usw.

Hier ist, wie ich empfehlen Sie versuchen, Ihr Problem mit der Komponente Helfer zu lösen:

// components/toggling-component.js 
export default Ember.Component.extend({ 
    mode: 'display', 
    modeComponent: Ember.computed('mode', function(){ 
    return this.get('mode') + '-mode' 
    }), 
    actions: { 
    setMode(mode){ 
     this.set('mode', mode) 
    } 
    } 
}) 

// templates/components/toggling-component.hbs 
Current Mode: {{mode}}<br/> 
<button {{action 'setMode' 'display'}}>Toggle Display</button>| 
<button {{action 'setMode' 'edit'}}>Toggle Edit</button> 
<hr/> 
{{component modeComponent text=model.textContent}} 

nun durch diesen Modus Eigenschaft Makeln, können Sie, was Modi laden Sie möchten, wo ein Modus Komponenten entsprechen, werden wie die folgenden zwei:

// templates/components/display-mode.hbs 
Display Mode Component: <br/> 
{{text}} 

// templates/components/edit-mode.hbs 
Edit Mode Component: <br/> 
{{textarea value=text cols="80" rows="6"}} 

Hier ist eine twiddle, die die vollständige Lösung demonstriert.