Понимание Ember Views

Question

Я ищу некоторые разъяснения относительно взглядов в ember.js

Coming с рельсов фона, и я пытаюсь игнорировать любые предубеждения. Из того, что я понимаю, в каркасе с насадкой имеется 5 компонентов:

• Маршруты: Здесь мы определяем состояние приложения. Состояние отображается в URL-адресе. Здесь мы также можем определить загрузку данных. Маршрутные классы определены, и при запуске ember создает объекты маршрута, которые сохраняются на протяжении всего приложения.
• Модели: Здесь указаны данные объекта. Может также определять вычисленные свойства. Объект модели создается для каждого объекта json, возвращаемого с сервера.
• Контроллеры: Это обеспечивает взаимодействие между моделями и шаблонами/представлениями. Определяются классы контроллеров, и при запуске ember создает объекты контроллера, которые сохраняются на протяжении всего приложения. Существует только один экземпляр каждого класса контроллера.
• Шаблоны: они описывают сгенерированную разметку.
• Просмотры: Это специальные шаблоны или элементы dom, относящиеся к модели. Они используются для определения событий интерфейса и отправки их на контроллер для обработки. Не уверен, когда их создавать.

В качестве примера позволяет сказать, что у меня есть EventsController, который имеет данные загружены на applicationRoute:

ScheduleApp.EventsController = Ember.ArrayController.extend(); 

ScheduleApp.ApplicationRoute = Ember.Route.extend({ 
    setupController: function() { 
    this.controllerFor('events').set('content', ScheduleApp.Event.find()); 
    } 
}); 

Теперь в моем шаблоне вместо итерация каждого и отображения информации, я хочу итерацию по каждому и создайте связанное представление, чтобы я мог добавлять взаимодействия к каждому событию. Я предполагаю, что мне нужно будет создать новое представление для каждого события и отобразить его в моем шаблоне. Однако я не уверен, где я создаю эти представления. Я определяю класс представления, а затем ember будет создавать новый объект представления каждый раз, когда я его вызываю с помощью помощника вида? В конце концов я хотел бы использовать appendTo в представлении для ввода моих событий в разные места в dom. Где это будет определено?

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

До сих пор ember был ужасно умным, поэтому я бы предположил, что существует встроенный метод для создания этих представлений. В конце концов, большинство пользовательских интерфейсов полны списков, требующих взаимодействия. Проблема заключается в том, что список, который я пытаюсь сделать, затем хочу распространить на dom в зависимости от его атрибутов.

Answer 1

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

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

App.EventsView = Ember.CollectionView.extend({ 
    // It needs a list of data to iterate upon 
    // We are binding it to the controllers content data which 
    // is a list of events 
    contentBinding: "controller.content", 
    appendSpan: function(){ 
    view = Ember.View.create({tagName: 'span'}); 
    this.get("childViews").forEach(function(child){ 
     view.appendTo(child); 
    }); 
    }, 
    // Now we need to also define a view template that will be 
    // generated for all the elements in the content array 
    // This could in turn be another collection view if required 
    // I am going to keep it simple for now 
    itemViewClass: Ember.View.extend({ 
    templateName: "event", 
    deleteEvent: function(){ 
     // Implement Delete 
     this.get("content").deleteRecord(); 
    }, 
    notifyUser: function(){ 
     // The record doesn't get deleted as soon as user clicks, the request goes to 
     // server and server deletes the record and sends back the response to the 
     // client, Hence I'm using an observer here on isDeleted property of the record 
     if(this.get('content.isDeleted')){ 
     alert("Record deleted Successfully"); 
     } 
    }.observes('content.isDeleted') 
    }) 
}) 

Важное примечание Внутри CollectionView определение this.get("content") относится к массиву событий, в то время как в itemViewClassthis.get("content") относится к одному объекту события

//Defining the template 
//Assuming the event model has a name property 
<script type="text/x-handlebars" data-template-name="event"> 
    Name: {{view.content.name}} 
    <a {{action deleteEvent target="view"}} href="#">Delete Event</a> 
</script> 

Теперь, когда вы нажмете ваши application_url/события вы» В списке событий каждое событие имеет кнопку удаления, я надеюсь, что это очистит некоторые понятия.

Для получения дополнительной информации о CollectionView

Дополнение за комментарий:

Если вы хотите добавить еще один вид на каждый вид ребенка, вы можете сделать это путем редактирования шаблона itemViewClass следующим

<script type="text/x-handlebars" data-template-name="event"> 
    Name: {{view.content.name}} 
    <a {{action deleteEvent target="view"}} href="#">Delete Event</a> 
    {{ view App.SomeOtherView }} 
</script> 

это может быть парциальные тоже следующего

<script type="text/x-handlebars" data-template-name="event"> 
    Name: {{view.content.name}} 
    <a {{action deleteEvent target="view"}} href="#">Delete Event</a> 
    {{ partial "somePartial" }} 
</script> 

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

//This is the template for App.EventsController, 
//template-name = "events" => view is App.EventsView and controller App.EventsController 
<script type="text/x-handlebars" data-template-name="events"> 
    <a {{action appendSpan target="view"}} href="#"> Append </a> 
</script> 

appendSpan определяется в CollectionView