Параллельные состояния с Ember.router

Question

Я хотел бы реализовать это statechart в Ember.js v1.5.x, используя Ember.Router, но у меня проблемы с механизмом параллелизма и истории.

В принципе, когда я активировать Резюме маршрута/состояние Я хотел бы, чтобы перейти к Нет изменения сделало и Transient состояния в то же время. Как я могу это достичь?

P.S. Я знаю, что, например, stativus имеют эти возможности, но не знают, как использовать его с маршрутизацией Ember.js. Пример был бы хорошим.

(источник изображения: Ян Хоррокс: создание пользовательского интерфейса с государственными картами с.153).

Answer 1

:)

Да Statecharts прекрасны и все, но угасающие на самом деле дает подсостояние через вычисляемые свойства.

Я не слишком хорошо знаком с государственными картами, и мне действительно нужно будет использовать ресурсы (horrocks), которые вы упомянули здесь (https://github.com/emberjs/ember.js/issues/4767#issuecomment-41458710), прежде чем я буду полностью знаком с номенклатурой этого конкретного примера (который я есть сделаю если желаете).

С этой целью, и, сказав это, пожалуйста, возьмите мой ответ с солью, потому что я не могу полностью понять контекст. Я просто надеюсь помочь.

Итак, в Ember у вас есть маршруты. Эти маршруты объясняют интерфейс вашего приложения. Это будет эффективно вашими государствами. Маршруты не являются вашими действиями или событиями. Они предоставляют URL-адрес вашего приложения, чтобы представить себя миру.

Итак, состояние A, кажется, представляет студентов. У вас есть два суб-состояния там ... 0 студентов и> 0 студентов. Вы должны обрабатывать их с помощью одного и того же маршрута (назовем его «Студенческий роутер»), потому что они оба имеют одинаковый набор данных, просто разные его подстанции. У маршрута был бы путь, называемый/ученики, вероятно. В этот момент у вас будет контроллер, который будет кормить модель маршрутизатором (список студентов), поэтому с этой целью этот контроллер будет расширением Em.ArrayController.

Этот контроллер массива (автоименованный StudentsController, extends Em.ArrayController) автоматически имеет «модель», и эта модель, после ее разрешения, является «массивом» учащихся.

В StudentsController вы можете легко вычислить свойство, называемое zeroCount, которое представляет состояние нуля или нет относительно модели. Вычисленные свойства автоматически сохраняются. Это было бы определить так:

App.StudentsController = Em.ArrayController.extend({ 
    zeroCount: function() { 
    // zeroCount is true if zero, otherwise false 
    return this.get('model.length') == 0; 
    }.property('model.length'); 
}); 

В шаблоне студентов, можно условно вынести один из двух суб-шаблонов в зависимости от этого состояния zeroCount ... вы бы сделать это так:

{{#if zeroCount}} 
    {{partial "noStudents"}} 
{{else}} 
    {{partial "someStudents"}} 
{{/if}} 

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

{{#each model}} 
    <p>This renders against each student... <br> 
    so if your students have a property called name, <br> 
    then you could just write {{name}} and it'd render the 
    students name</p> 
{{else}} 
    <p>This renders when there are no students</p> 
{{/each}} 

Вы хотите поставить ссылку удалить по каждому из этих пунктов ... и живые связанные свойства обрабатывать все состояния для вас ... (таким образом, когда модель имеет нулевые элементы в ней, шаблон идет в блок else каждого ... иначе он переходит в основной блок).

Действие удаления, обработанное чем-то вроде Delete внутри вашей директивы шаблона модели #each (handlebars), переходит к контроллеру и ищет действие внутри него, вызывающее неудивительно, удаление ... и это будет выглядеть так :

App.StudentsController = Em.ArrayController.extend({ 
    actions: { 
    delete: function(itemToDelete) { 
     itemToDelete.delete(); 
     // assuming the model "class" understands delete 
    } 
    } 
}); 

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

Состояние с изменениями эффективно обрабатывается не по маршруту, а по модели ... как и должно быть ... th e модель несет ответственность за сохранение графика объекта или указание представления и контроллера, изменилась ли модель (например, Ember Data, например, является грязным как состояние на каждом экземпляре модели, которое может сказать вам, было ли оно изменено или нет) ...

Надеюсь, это раздражает ваш аппетит. Я рекомендую ознакомиться с некоторыми примерами на сайте Ember ... они действительно помогают и следуют за приложением Ember TODOMVC, если вы не проверили это ...

Ember процветает на таких типах потоков управляемые штатом пользовательские интерфейсы ... ознакомьтесь с основным заявлением Тома и Иегуды на конфессиях, если вы еще этого не сделали ... они говорят о потоках точно так же, как вы говорите об этих состояниях и под-состояниях.

Надеюсь, что это поможет.