javascript - EmberJS application - structure and more -

javascript - EmberJS application - structure and more -

during preparation big project, investigating js mv* frameworks used team 10 developers. first tried angularjs, since looks it's performance best of frameworks (so topic). has nice futures di, don't liked work it, since me little bit messy code hard understand , code clean mach possible, structured , easy read.

currently i'm trying emberjs , looks ember, developer friendly , it's easy work it. wrote little "log in widget" see how ember app should structured. during development tried solve issues async requests, animations, etc...

jsfiddle

the "widget" work , wanted him do, @ point, still have questions , hear advice experienced ember developers regarding current code structure, object roles, , issues can meet later when using ember.

so here questions have:

1) ember views cool, if want ember handle existing elements actions , animation? mean illustration have link rendered on server (or html received ajax), how can bind ember action handle it's click action , instantiate custom linkview it? i'm sure can find solution "manually" binding dom event jquery or something, exists "ember" way it?

2) possible set statemanager properties, before entering initial state, without setting on class level?

3) can point me illustration of how utilize em.deffered? made promises work jquery $.deferred(), not have dependency on jquery in statemanager.

4) exists other "ember" way tell framework add together view dom in hidden state? tried set isvisible: false, not works.

5) exists other way add together hidden view again, workaround error "cannot perform operations on metamorph not in dom."?

here source reference:

<script type="text/x-handlebars" data-template-name="guestview"> user: {{view ember.textfield valuebinding='controller.username' placeholderbinding='controller.usernamehint'}} pass: {{view ember.textfield valuebinding='controller.password' placeholderbinding='controller.passwordhint' }} <br/> <button {{action login this}}>login</button> </script> <script type="text/x-handlebars" data-template-name="userview"> hello {{ username }} <button {{action logout this}}>logout</button> </script> <script type="text/javascript"> var app = em.application.create({ authcontroller: null, currentuserbinding: 'authcontroller.content', ready: function () { this.set("authcontroller", app.authcontroller.create()); } }); app.authcontroller = em.objectcontroller.extend({ content: null, target: null, init: function () { this.set("content", this.getuserfromcookieordefault()); //is possible in ember, set controller before entering initial state, //but without setting on class level? this.set("target", app.authmanager.reopen({ controller: }).create({ //initialstate: this.get("content").isauthorized ? "authorized" : "guest" })); this.get("target").transitionto(this.get("content").isauthorized ? "authorized" : "guest"); }, dologin: function (mgr, context) { console.log("logging in"); //validation, etc... //imulating async info loading, actually, should done promises settimeout(function () { mgr.transitionto("authorized"); }, 1000); }, dologout: function (mgr, context) { console.log("logging out"); //logout logic mgr.transitionto("guest"); this.set("content", app.guest.create()); }, getuserfromcookieordefault: function () { homecoming app.guest.create(); //return app.user.create({ username: "testuser" }); }, }); app.authmanager = em.statemanager.extend({ controller: null, cantransist: true, // { data, commitcallback, abortcallback } transitionto: function (path, context) { var originaltransitionto = this._super, manager = this, cantransist = "cantransist", deffered = null, originaltransitiontoparams = context && (context.data || context.commitcallback || context.abortcallback) ? context.data : context; if (!manager.get(cantransist)) { em.assert("already in transition"); return; } manager.set(cantransist, false); if (!manager.currentstate) { originaltransitionto.apply(manager, [path, originaltransitiontoparams]); manager.set(cantransist, true); return; } if (!manager.currentstate.isasyncexit) { originaltransitionto.apply(manager, [path, originaltransitiontoparams]); manager.set(cantransist, true); } else { //how utilize em.deffered? deffered = $.deferred(); deffered.done(committransition).fail(aborttransition); manager.currentstate.beforeexit(deffered, originaltransitiontoparams); } function committransition() { originaltransitionto.apply(manager, [path, originaltransitiontoparams]); manager.set(cantransist, true); } function aborttransition() { manager.set(cantransist, true); } }, states: { guest: em.state.create({ isasyncexit: true, enter: function (mgr) { console.log("guest"); app.guestview = app.guestview.create({ templatename: "guestview", controller: mgr.controller, }).append(); }, beforeexit: function (promise, context) { app.guestview.remove(promise); }, login: function (mgr, context) { mgr.controller.dologin(mgr, context); } }), authorized: em.state.create({ isasyncexit: true, enter: function (mgr) { console.log("authorized"); app.userview = app.userview.create({ templatename: "userview", controller: mgr.controller, }).append(); }, beforeexit: function (promise) { app.userview.remove(promise); }, logout: function (mgr, context) { mgr.controller.dologout(mgr, context); } }) } }); app.fadingview = em.view.extend({ //does exists other "ember" way tell framework add together view dom in hidden state? //i tried set isvisible: false, not works classnames: ['initialhidden'], didinsertelement: function () { //if using this.$().hide().show('slow') without 'initialhidden' class view still visible when alert shown //alert("view visible"); this.$().hide().fadein(500).removeclass("initialhidden"); }, remove: function (promise) { var originalview = this, originalviewelement = originalview.$(), clonedview = originalview.$().clone(), originalremove = this._super; $(clonedview).attr("id", $(clonedview).attr("id") + "_clone").removeclass('ember-view'); $("*", clonedview).removeclass('ember-view').remove("script[id^=metamorph]"); originalview.$().replacewith(clonedview); //this line exists, because of metamorph error: //cannot perform operations on metamorph not in dom. $(originalviewelement).css("display", "none").appendto("body"); clonedview.fadeout(1000, function () { $(this).remove(); originalremove.apply(originalview); promise.resolve(); }); } }); app.guestview = app.fadingview.extend(); app.userview = app.fadingview.extend(); app.user = em.object.extend({ username: "", isauthorized: true }); app.guest = em.object.extend({ isauthorized: false, password: "", usernamehint: "username...", passwordhint: "password..." }); </script>

javascript model-view-controller ember.js