Ember ViewState альтернатива

Question

Какая альтернатива Ember.ViewState, которая устарела? Я попытался использовать Ember.State вместо этого с ContainerView и т. Д., Но не смог загрузить просмотр. Если кто-то может помочь (желательно с любым примером), это будет здорово.

(Невозможно разделить весь код, как это работа продолжается)

newState: Ember.State.create({ 
     ... 
     view: Ember.ContainerView.create({ 
      childViews: [ Dashboard.ChartView.create() ] 
     }), 
}); 

Кроме того, как отлаживать, почему вид не визуализируется, особенно если вы хотите знать, если ваши макеты и выходы проблема? Разделы работают с StateManager? Прямо сейчас, предположим, что в моем index.html есть только следующее: достаточно ли использовать Ember AnimatedOutlet?

<script type="text/x-handlebars" data-template-name="application"> 
    {{animatedOutlet name="main"}} 
</script> 

С новыми спецификациями Ember, как использовать розетки с StateManager без использования маршрутов? Я хочу одностраничное приложение с единственным маршрутом «/» по умолчанию?

Спасибо,
Пэдди

Answer 1

Для такого рода проблемы я обычно создать Ember.StateManager из отделите ember-states проекта. Затем я вычислил свойства на моем контроллере, которые определяют, должны ли отображаться различные части страницы. Затем в моих шаблонах я использую операторы типа {{#if shouldShowPartX}} ... {{\if}}, которые отображаются только в том случае, если StateManager находится в данном состоянии. Вот более полный пример:

App.MyController = Ember.Controller.extend({ 
    isOpen: Ember.computed.equal('panelManager.currentState.name', 'open') 
    init: function() { 
     this._super(); 
     # Create the state manager instance from the class defined on this controller. 
     this.set('panelManager', this.PanelManager.create()); 
    }, 
    reset: (function() { 
     this.get('panelManager').send('reset'); 
    }).on('init'), 
    PanelManager: Ember.StateManager.extend({ 
     initialState: 'open', 
     open: Ember.State.create({ 
     # If already open do nothing. 
     open: function(manager) {}, 
     # Close the panel 
     shrink: function(manager) { 
      manager.transitionTo('closed'); 
     }, 
     }), 
     closed: Ember.State.create({ 
     # If already closed, do nothing 
     shrink: function() {}, 
     # Open the panel 
     open: function(manager) { 
      manager.transitionTo('open'); 
     }, 
     }), 
     reset: function(manager) { 
     manager.transitionTo(manager.get('initialState')); 
     } 
    }) 
    }); 

Тогда, на мой взгляд, я могу сделать что-то вроде:

{{#if isOpen}} 
    <div class="panel panel-open"> ... </div> 
{{else}} 
    <div class="panel panel-closed"> ... </div> 
{{/if}} 

Это правда простейший пример, и один не обычно используют StateManager для простого два , но более сложный пример, вероятно, будет путать.

Это поможет? Он не требует беспорядочного взаимодействия с ContainerView и вместо этого полагается на неявный ContainerView, который обрабатывает блоки {{#if}} и создает представления в соответствии с состоянием StateManager.