ES6: Discourse.ContainerView

app/assets/javascripts/discourse/components/color-picker.js.es6

@@ -1,4 +1,6 @@
-export default Discourse.ContainerView.extend({
+import DiscourseContainerView from 'discourse/views/container';
+
+export default DiscourseContainerView.extend({
   classNames: 'colors-container',
 
   _createButtons: function() {

app/assets/javascripts/discourse/views/archetype-options.js.es6

@@ -1,4 +1,6 @@
-export default Discourse.ContainerView.extend({
+import DiscourseContainerView from 'discourse/views/container';
+
+export default DiscourseContainerView.extend({
   metaDataBinding: 'parentView.metaData',
 
   init: function() {

app/assets/javascripts/discourse/views/container.js.es6

@@ -1,13 +1,4 @@
-/**
-  Our own containerView with a helper method for attaching views
-
-  @class ContainerView
-  @extends Ember.ContainerView
-  @namespace Discourse
-  @uses Discourse.Presence
-  @module Discourse
-**/
-Discourse.ContainerView = Ember.ContainerView.extend(Discourse.Presence, {
+export default Ember.ContainerView.extend(Discourse.Presence, {
 
   /**
     Attaches a view and wires up the container properly

app/assets/javascripts/discourse/views/pagedown-editor.js.es6

@@ -1,16 +1,9 @@
 /*global assetPath:true */
 
-/**
-  A control to support using PageDown as an Ember view.
-
-  @class PagedownEditor
-  @extends Discourse.ContainerView
-  @namespace Discourse
-  @module Discourse
-**/
 import PagedownPreviewView from 'discourse/views/pagedown-preview';
+import DiscourseContainerView from 'discourse/views/container';
 
-export default Discourse.ContainerView.extend({
+export default DiscourseContainerView.extend({
   elementId: 'pagedown-editor',
 
   init: function() {

app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6

@@ -6,8 +6,9 @@ import InviteReplyButton from 'discourse/views/invite-reply-button';
 import ReplyButton from 'discourse/views/reply-button';
 import PinnedButton from 'discourse/views/pinned-button';
 import TopicNotificationsButton from 'discourse/views/topic-notifications-button';
+import DiscourseContainerView from 'discourse/views/container';
 
-export default Discourse.ContainerView.extend({
+export default DiscourseContainerView.extend({
   elementId: 'topic-footer-buttons',
   topicBinding: 'controller.content',
 

app/assets/javascripts/discourse/views/topic-map-container.js.es6

@@ -1,18 +1,10 @@
-/**
-  This view contains the topic map as well as other relevant information underneath the
-  first post.
-
-  @class TopicMapContainerView
-  @extends Discourse.View
-  @namespace Discourse
-  @module Discourse
-**/
 import PrivateMessageMapComponent from 'discourse/components/private-message-map';
 import TopicMapComponent from 'discourse/components/topic-map';
 import ToggleSummaryComponent from 'discourse/components/toggle-summary';
 import ToggleDeletedComponent from 'discourse/components/toggle-deleted';
+import DiscourseContainerView from 'discourse/views/container';
 
-export default Discourse.ContainerView.extend({
+export default DiscourseContainerView.extend({
   classNameBindings: ['hidden', ':topic-map'],
   shouldRerender: Discourse.View.renderIfChanged('topic.posts_count'),
 

app/assets/javascripts/main_include.js

@@ -13,7 +13,7 @@
 //= require ./discourse/lib/markdown
 //= require ./discourse/lib/computed
 //= require ./discourse/views/view
-//= require ./discourse/views/container_view
+//= require ./discourse/views/container
 //= require ./discourse/lib/debounce
 //= require ./discourse/models/model
 //= require ./discourse/models/user_action
@@ -23,7 +23,7 @@
 //= require ./discourse/controllers/object_controller
 //= require ./discourse/controllers/navigation/default
 //= require ./discourse/views/text-field
-//= require ./discourse/views/modal/modal_body_view
+//= require ./discourse/views/modal_body_view
 //= require ./discourse/views/flag
 //= require ./discourse/views/combo-box
 //= require ./discourse/views/button

test/javascripts/views/container_view_test.js

@@ -1,53 +1,53 @@
-var SomeViewClass = Ember.View.extend();
-var container = Discourse.ContainerView.create();
+var SomeViewClass = Ember.View.extend(),
+    containerView;
 
-var containerHasOnlyOneChild = function(klass) {
-  equal(container.get('childViews').length, 1, "container has no other children than the one created by method");
-  ok(container.objectAt(0) instanceof klass, "container's child created by method is an instance of a correct class");
-};
+function containerHasOnlyOneChild(klass) {
+  equal(containerView.get('childViews').length, 1, "container has no other children than the one created by method");
+  ok(containerView.objectAt(0) instanceof klass, "container's child created by method is an instance of a correct class");
+}
 
-var containerHasTwoChildren = function(klass1, klass2) {
-  equal(container.get('childViews').length, 2, "container has both already existing and newly created children");
-  ok(container.objectAt(0) instanceof klass1, "already existing child's class is correct");
-  ok(container.objectAt(1) instanceof klass2, "newly created child's class is correct");
-};
+function containerHasTwoChildren(klass1, klass2) {
+  equal(containerView.get('childViews').length, 2, "container has both already existing and newly created children");
+  ok(containerView.objectAt(0) instanceof klass1, "already existing child's class is correct");
+  ok(containerView.objectAt(1) instanceof klass2, "newly created child's class is correct");
+}
 
 var childHasProperty = function(name) {
-  equal(container.objectAt(0).get(name), name, "method passes properties to the container's child it creates");
+  equal(containerView.objectAt(0).get(name), name, "method passes properties to the container's child it creates");
 };
 
-module("Discourse.ContainerView", {
+module("view:container", {
   setup: function() {
-    container.removeAllChildren();
+    containerView = Discourse.__container__.lookup('view:container');
   }
 });
 
 test("mixes in Discourse.Presence", function() {
-  ok(Discourse.Presence.detect(container));
+  ok(Discourse.Presence.detect(containerView));
 });
 
 test("attachViewWithArgs: creates a view of a given class with given properties and appends it to the container", function() {
-  container.attachViewWithArgs({foo: "foo"}, SomeViewClass);
+  containerView.attachViewWithArgs({foo: "foo"}, SomeViewClass);
 
   containerHasOnlyOneChild(SomeViewClass);
   childHasProperty("foo");
 });
 
 test("attachViewWithArgs: creates a view of a given class without any properties and appends it to the container", function() {
-  container.attachViewWithArgs(null, SomeViewClass);
+  containerView.attachViewWithArgs(null, SomeViewClass);
 
   containerHasOnlyOneChild(SomeViewClass);
 });
 
 test("attachViewWithArgs: creates a view without class specified (Ember.View is used by default) with given properties and appends it to the container", function() {
-  container.attachViewWithArgs({foo: "foo"});
+  containerView.attachViewWithArgs({foo: "foo"});
 
   containerHasOnlyOneChild(Ember.View);
   childHasProperty("foo");
 });
 
 test("attachViewWithArgs: creates a view without class specified (Ember.View is used by default) without any properties and appends it to the container", function() {
-  container.attachViewWithArgs();
+  containerView.attachViewWithArgs();
 
   containerHasOnlyOneChild(Ember.View);
 });
@@ -55,21 +55,21 @@ test("attachViewWithArgs: creates a view without class specified (Ember.View is
 test("attachViewWithArgs: appends a view to a container already containing other views", function() {
   var AlreadyContainedViewClass = Ember.View.extend();
   var alreadyContainedView = AlreadyContainedViewClass.create();
-  container.pushObject(alreadyContainedView);
+  containerView.pushObject(alreadyContainedView);
 
-  container.attachViewWithArgs(null, SomeViewClass);
+  containerView.attachViewWithArgs(null, SomeViewClass);
 
   containerHasTwoChildren(AlreadyContainedViewClass, SomeViewClass);
 });
 
 test("attachViewClass: creates a view of a given class without any properties and appends it to the container", function() {
-  container.attachViewClass(SomeViewClass);
+  containerView.attachViewClass(SomeViewClass);
 
   containerHasOnlyOneChild(SomeViewClass);
 });
 
 test("attachViewClass: creates a view without class specified (Ember.View is used by default) without any properties and appends it to the container", function() {
-  container.attachViewClass();
+  containerView.attachViewClass();
 
   containerHasOnlyOneChild(Ember.View);
 });
@@ -77,9 +77,9 @@ test("attachViewClass: creates a view without class specified (Ember.View is use
 test("attachViewClass: appends a view to a container already containing other views", function() {
   var AlreadyContainedViewClass = Ember.View.extend();
   var alreadyContainedView = AlreadyContainedViewClass.create();
-  container.pushObject(alreadyContainedView);
+  containerView.pushObject(alreadyContainedView);
 
-  container.attachViewClass(SomeViewClass);
+  containerView.attachViewClass(SomeViewClass);
 
   containerHasTwoChildren(AlreadyContainedViewClass, SomeViewClass);
 });