Данные загрузки ember.js в диалоговом окне

Question

Я пытаюсь создать свое первое приложение ember.js. Календарь:

мой день модель

App.Day = Ember.Object.extend({ 
today : null, 
dayNumber : null, 
addEvent : function() { 
    console.log(this); 
    $("#myModal").modal('show'); 
} 
}); 

вид HTML

<div class="cal"> 
    {{#each App.DayList}} 
     {{#if this.today}} 
     <div class="day today" {{action "addEvent" target="model" }}> 
      {{#with this as model}} 
      <span class="text">{{this.dayNumber}}</span> 
      {{/with}} 
     </div> 
     {{else}} 
     <div class="day" {{action "addEvent" target="model" }}> 
      {{#with this as model}} 
      <span class="text">{{this.dayNumber}}</span> 
      {{/with}} 
     </div> 
     {{/if}} 
    {{/each}} 
    </div> 

так по щелчку на день я показать самозагрузки диалог, и я не буду загружать Экстерн данные, но мне нужна информация примерно щелкнув день.

Я понимаю, я создаю вид

App.DayDetails = Ember.View.extend({ 

}); 

и внутри этой точки зрения я отправить запрос AJAX, но как получить информацию о щелкнули день внутри этой точки зрения?

Answer 1

Вы должны почти никогда делать какие-либо AJAX на виду.

просмотров сделать две вещи:

(1) рисовать себя

(2) реагировать на UI события (клики, ввод текста и т.д.)

Ваше мнение должно получить его содержимое от контроллера, в этом случае я предполагаю App.DayController или DayDetailsController. (это еще одна вещь, лучше всего закончить ваши подклассы View или Controller и т. д., поэтому его очевидный взгляд на то, что они делают).

Где контроллер получает эти данные, это может осложнить ситуацию. В идеале, в зрелом приложении у вас будет хранилище данных (комбинация — в концепции — вашей серверной базы данных и ActiveRecord, если вы используете рельсы), которые будут запрошены. Упрощенно, однако, вы могли бы заставить контроллер нести ответственность за использование jQuery для ручного управления запросом ajax. До тех пор, пока мы делаем короткие сокращения, вы можете поместить такой вызов в определенное место (контроллер Singleton, контроллер событий дня, сама модель дня), просто НЕ вид. И важно, когда вы берете такие сокращения, чтобы ограничить заражение ... все, что вы должны делать с помощью руководства ajax, забирает JSON, а затем немедленно и оперативно возвращает его в экосистему ember, устанавливая его как содержимое контроллер массива. I.e., не идет один или два шага дальше, пытаясь вставить данные в представление вручную или еще что-то. Не сражайтесь с Эмбером, если вы можете этого избежать.

Несколько вещей:

(1) Использование this является излишним, так как являются {{with}} заявления. Внутри блока {{each}} контекст будет текущим объектом (или его оберточным контроллером, если вы используете itemController) на итерации. (ЕСЛИ вы используете синтаксис «x in y», и в этом случае контекст остается контроллером)

(2) В модели НЕ следует пытаться изменить DOM. Вместо этого полагайтесь на привязки и ваши контроллеры для координации изменений пользовательского интерфейса.Что вы можете сделать, это иметь App.DayController, что вы можете положить addEvent на, а затем в вашем {{each}} использования itemController="App.DayController".

App.DayController = Ember.ObjectController.extend({ 
    addEvent: function() { 
     // ... 
    } 
}); 

Затем контекст для каждого цикла в вашем {{each}} шаблоне будет каждый отдельный контроллер день. Контроллер автоматически будет цель и контекст взглядов, чтобы ваш шаблон будет выглядеть следующим образом:

{{#each App.DayList itemController="App.DayController"}} 
    <div {{bindAttr class=":day today"}} {{action addEvent}}>{{dayNumber}}</div> 
{{/each}} 

(: в :day означает, что day всегда будет класс, но today будет только если класс today Недвижимость по контексту является правдой)

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