Jak programowo dodać widoki podrzędne do widoku Ember w określonych selektorach DOM?

Question

Mam widok, który używa biblioteki innej firmy do renderowania dodatkowych elementów DOM w hoście didInsertElement. Po dodaniu nowych elementów muszę dodać do nich widoki podrzędne, aby mogły renderować dane dynamiczne.

Oto, co starałem:

App.MyView = Ember.View.extend({ 
    didInsertElement: function() { 
    create3rdPartyDomElements(); 
    var element = this.$('someSelector'); 
    childView = this.createChildView(App.SomeViewClass, attributesDict); 
    childView.appendTo(element); 
    } 
}); 

(jsbin: http://jsbin.com/idoyic/3)

Czyni to moje poglądy zgodnie z oczekiwaniami, ale daje następujący błąd twierdzenia z Ember RC 7: „Nie można dołączyć do istniejącej Ember.View. Zamiast tego rozważ użycie Ember.ContainerView. "

Próbowałem rozszerzyć ContainerView, zgodnie z zaleceniami here i to działa, ale nie mam możliwości wstawiania widoków podrzędnych w określonych selektorach DOM. Po prostu wstawia widoki podrzędne na początku widoku rodzica.

Czy ktoś może mi pomóc? Wielkie dzięki!

Answer 1

Można uczynić poglądy dziecka do rodzica widoku danych ukrytych div, a następnie odłączyć i dołączyć je do dowolnych elementów DOM w didInsertElement haka.

http://jsbin.com/qaqome/1/

Do podobnych problemów (komponenty zamiast poglądów) patrz również this question.

Answer 2

Spróbuj dodać własność Państwa zdaniem coś takiego:

App.MyView = Ember.View.extend({ 
    childViewsContainer: Em.ContainerView.create({}), 
    didInsertElement: function() { 
    create3rdPartyDomElements(); 
    var element = this.$('someSelector'); 
    childViewsContainer.createChildView(App.SomeViewClass, attributesDict); 
    childView.appendTo(element); 
    } 
}); 

następnie można uzyskać dostęp do childViewsContainer i robić to, co kiedykolwiek chcesz z nim

Answer 3

ten sposób stworzyłem:

Implementacja, w której główny widok, w tym przypadku codemirror, znajduje się pośrodku. Możliwe jest też dodanie większej liczby widoków, u góry lub u dołu.

App.EditorView = Ember.View.extend({ 
    templateName: 'editor-view', 
    topView: Ember.ContainerView.extend(), 
    bottomView: Ember.ContainerView.extend(), 
    CodeMirrorView: Ember.TextArea.extend({ 
    didInsertElement: function() {  
     this.codeMirror = CodeMirror.fromTextArea(this.get('element'));     
    } 
    }) 
}); 

Szablon:

<script type="text/x-handlebars" data-template-name="editor-view"> 
    {{view view.topView viewName="topViewInstance"}} 
    {{view view.CodeMirrorView}} 
    {{view view.bottomView viewName="bottomViewInstance"}} 
</script> 

celu reprezentowania niestandardowy komponent:

App.MyComponent = Ember.View.extend({ 
    templateName: 'click-here', 
    message: null, 
    click: function() { 
    alert(this.get('message')); 
    } 
}); 

Realizacja:

App.MyEditorView = App.EditorView.extend({ 
    didInsertElement: function() { 
    this._super(); 
    this.get('topViewInstance').pushObject(App.MyComponent.create({ message: "Hello" })); 

    this.get('bottomViewInstance').pushObject(App.MyComponent.create({ message: "World" })); 
    } 
}); 

Dzięki temu możliwe jest stworzenie nowej wystąpienie lub rozszerzenie App.EditorView i wstaw więcej widoków u góry lub u dołu. Ponieważ numery topView i bottomView są dodane, wszystkie dodane widoki będą miały powiązania, zdarzenia i inne funkcje embera.

Podaruj wygląd w tym jsbin go zobaczyć pracę http://jsbin.com/ucanam/686/edit