EmberJs: отрисовка шаблона внутри handlebars-helper в его родительский элемент

Question

Поскольку у меня есть имя View внутри переменной, я использую помощник handlebars для его визуализации.

Итак, у меня есть объект следующим образом (все упрощено, конечно)

config = Ember.Object.create({ view: "MyTplView"}) ; 

Далее я следующий шаблон

<script type="text/x-handlebars" data-template-name="index"> 
    <div id="container"> 
     {{helperViewRenderer config}} 
    </div> 
</script> 

И рули помощник

Ember.Handlebars.registerBoundHelper('helperViewRenderer', function(value, options) { 
    var template = App[value.view].create() ; 
    template.appendTo("#container") ; 
}) ; 

Проблема в том, что я пытаюсь вставить шаблон в элемент с идентификатором «контейнер», который не существуют в этот момент. Каковы возможности исправить это. Например, можно ли получить HTML-строку из шаблона и вернуть это вместо этого?

Answer 1

Ember пытается идти по пути создания «торговых точек» с помощью нового маршрутизатора.

Если вы хотите использовать метод appendTo, то, очевидно, вам нужно добавить свой шаблон в существующий элемент HTML. Таким образом, вы не можете получить строку HTML из шаблона (если только вы не знаете, что это часть родительского шаблона). Однако, если вы не слишком беспокоитесь о том, где вы вставляете свой шаблон, вы можете использовать прямой append, который добавит шаблон в конец тела.

Я думаю, что в вашем случае было бы лучше познакомиться с маршрутизатором, поскольку вам кажется, что вы хотите отображать разные шаблоны внутри одного и того же основного шаблона. Поэтому вы можете легко отделить их, используя URL-адрес в качестве переменной и вставляя соответствующий вид в розетку.

App.Router.map(function() { 
    this.route("index", { path: "/" }); 
    this.route("first", { path: "/view1" }); 
    this.route("another", { path: "/view2" }); 
}); 

App.FirstRoute = Em.Route.extend({ 
    renderTemplate: function() { 
    this.render('view1', { outlet: 'main' }); 
    } 
}); 

App.AnotherRoute = Em.Route.extend({ 
    renderTemplate: function() { 
    this.render('view2', { outlet: 'main' }); 
    } 
}); 

Вид:

<script type="text/x-handlebars" data-template-name="index"> 
    <div id="container"> 
     {{outlet main}} 
    </div> 
</script> 

Таким образом, вам не нужно какие-либо рули Helper переходящие в переменных и все это аккуратно завернутые в конвенциях Поста.

Answer 2

Мне посчастливилось определить класс дочернего представления внутри родительского класса представления, а не как глобальный. Вы можете передать любой путь - глобальный или локальный - в помощник view, а текущий вид доступен как view в текущем контексте. Таким образом,

App.ParentView = Ember.View.extend({ 
    template: Ember.Handlebars.compile("The parent's child: {{view view.ChildView}}."), 

    ChildView: Ember.View.extend({ 
    template: Ember.Handlebars.compile("-- child view --") 
    }) 
});