Validating Ember.js architecture

Question

I'm struggling to get comfortable with the layout of Ember.js architecture. Could someone please give me hints and tips on the most appropriate way to structure my application.

<html>
    <head>
        <script src="../script/library/jquery.js"></script>
        <script src="../script/library/handlebars.js"></script>
        <script src="../script/library/ember.js"></script>
        <script>
            $(document).ready(function(){
                Application = Ember.Application.create();

                Application.ApplicationView = Ember.View.extend({
                    templateName: 'application'
                });

                Application.ApplicationController = Ember.Controller.extend();

                Application.Cat = Ember.Object.extend({
                    name: null,
                    breed: null
                });

                Application.CatView = Ember.View.extend({
                    templateName: 'catCreate'
                });

                Application.CatController = Ember.Controller.extend({
                    content: null,
                    create: function() {
                        alert("controller uploading: " + this.get('content').name);
                    }
                });

                Application.Router = Ember.Router.extend({
                    root: Ember.Route.extend({
                        createCat: Ember.Route.extend({
                            route: '/',
                            connectOutlets: function(router) {
                                router.get('applicationController').connectOutlet('cat', Application.Cat.create());
                            }
                        })
                    })
                });

                Application.initialize();
            });

        </script>
    </head>
<body lang="en">
    <script type="text/x-handlebars" data-template-name="application">
        {{outlet}}
    </script>

    <script type="text/x-handlebars" data-template-name="catCreate">
        <h1>Cat Detail</h1>
        {{view Ember.TextField id="name" valueBinding="content.name"}}<br/>
        {{view Ember.TextField id="breed" valueBinding="content.breed"}}<br/>
        <button {{action "create" target="controller"}}>Done</button>
    </script>
</body>
</html>

score 2 · Answer 1 · edited May 23 '17 at 12:27

have a look at this question: Could someone point me to an ember.js project that uses the latest routing system? Bonus points if it uses ember-data as well there are some nice app examples.

I personally really like this one:

https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences

It gives you a good idea on how to structure your files and use modern tools for development and deployment of your app.

Validating Ember.js architecture

1 Answers1