ember.js: Correct way to select a tab and keep content - ember.js

I'm trying to use emberjs but I'm stuck in some stupid errors.
I didn't find a good way to select a tab. Should I set some variable in the route and use bindAttr in the handlebar? (I tried it but didn't work). I need to create a emberjs view for each element that I need to interact with template and use {{#view}}{{/view}}?
In the 'navigation' outlet, I render signup/signin forms and want to keep filled data when user change the selected tab. How can I do that?
Here is the code: http://jsfiddle.net/alexandrebini/6g7Xu/24/
Sorry if I was not clear, I'm a little lost...

Use Bindings & also Ember provides their textfield views which are pretty handful...I edited some of your fiddle to account your issue, rest of fiddle I think you can handle by yourself, http://jsfiddle.net/6g7Xu/26/ (Edited the Sign In part use this to edit the Sign up view)
Hope this helps !

Related

django - Add another model without Popup

Is there any magic why to do this in admin panel of django?
Let me know
Off the top of my head, you could use JS to grab the popup link and load the HTML in a div on the page. But that means you need to override the admin template. This QA should be helpful.
It also means you need to capture the saving of the new house. So, when someone presses save, depending on the response, the div either closes or shows the errors WITHOUT refreshing th page. I'm not sure but I think you'll also need to override the admin view that does this to send back json responses.
OR
You could use JS to mute that link and call up your own url, which would allow you to create your own view with your own custom form that does this. This would give you a bit more control without having to hack away at the Admin functionality.
e.g /house/ajax_add
You'll need to refresh the options in the House dropdown though. So I don't think you can avoid extending the template, now that I think about it.
It seems like a lot of trouble, really. No magic way that I know of, but it's possible.
To avoid popups, you might want to look at https://github.com/FZambia/django-fm:
Django-fm allows to create AJAX forms for creating, editing, deleting
objects in Django. This is a very personalized approach to quickly
build admin-like interfaces.
A live example can be found on http://djangofm.herokuapp.com/.
I'm not sure how this integrates with the current admin site, but with some changes it should not be hard.

Using Umbraco 7.2 grid view, how do I insert the grid view into my template?

I'd really like to use grid view to render my content on a simple text page. I've got a grid view with the alias "content" set up. What do I type in the template to get it to show up? #CurrentPage.content does not work. I realize it probably uses those partials that 7.2 came with but I've got no idea how to use them.
It may help to know my knowledge level on this. I'm very new at wiring up templates to doctypes. The only ways of pulling data from my content I actually know how to use so far are these:
Get some text by typing something like #CurrentPage.content
Get a picture by typing something like #Umbraco.Media(CurrentPage.Picture)
Official documentation for the GridView can be found on the community website. For posterity's sake here is the relevant part:
Render grid in template
To display the grid on a site use:
#CurrentPage.GetGridHtml("propertyAlias")
This will by default use the view /views/partials/grid/bootstrap3.cshtml you can also use the built-in bootstrap2.cshtml view by overloading the method:
#CurrentPage.GetGridHtml("propertyAlias", "bootstrap2")
or point it a custom view, which by default looks in /views/partials/grid/ - or provide the method with a full path
#CurrentPage.GetGridHtml("propertyAlias", "mycustomview")
#CurrentPage.GetGridHtml("propertyAlias", "/views/mycustomfile.cshtml")
If you're working with a strongly typed model simply replace #CurrentPage with #Model.Content, so:
#Model.Content.GetGridHtml("propertyAlias")
The answer was to insert this into the template:
#CurrentPage.GetGridHtml("propertyalias")
In my case, content would go in place of propertyalias.

Ember.js multiple views for same controller OR wizard like routes; how to?

Scenario:
You have something like a wizard. The user completes something on the first page, click next and go to second page and so on until he reaches the last page. Here he clicks finish and all his input is stored and persisted using an ember model.
There are two other questions similar to this one:
Ember.js wizard control
Multi-step form (or multiple "pages") in one route using Ember.js
At first I've tried with a route/controller/view for each step, but since the answers are basically a controller's state variables and get lost while transitioning, it is obvious that it cannot work like this!
Then I took the approach described in the above links. One route, one controller, one template with lots of {{#if }} so that I show only the fields of the current step. I think I might improve this by using partials and so each step will have its own template.
The question is: is this the only/the best approach? Does anyone figured out a better way to implement such a flow?
If you make each wizard page a component and then pass the model as a template parameter to each component, you get a pretty nice workflow. The URL is stable (not constantly adding junk onto the end in order to pass state around); it's easy to drop the user into the first step whenever they enter the route (such as manually inputing the URL or perhaps more importantly, finishing the wizard and then hitting the browser's back button); and you can perform validation on each page of the wizard.
Check out my longer answer here
One of the possible approaches would be using Query Parameters so that you can manage a state of each step in a single wizard controller.

Ember: Cannot read property 'enterStates' of undefined and textfield update

I have the following problem with ember.
I have a table with a set of datas. I have an event that returns me the current element of the table. Then it opens another view by transitioning into a new state and writes the selected table data in a textfield.
click: function(e) {
var element = $(e.target).closest("td");
App.tee = element.text().trim();
var router;
router = this.get('controller.target.router');
router.transitionTo('newRoute')
As you can see I have some other routes in my router as well.
The last two routes(home and profile) are part of a nav-tab. They work perfectly beside I click on the table. Then i get the following error when i click on a tab: Uncaught TypeError: Cannot read property 'enterStates' of undefined
Ok i give it another try to explain what i wanted to do.
What i want to do is to create a table with some data (for example persons).
When i click on a specific person in the table the corresponding table-data should be shown in the textfields that appear below. Whenever i click on another person the textfields below should change to the informations of the current clicked person in the table. When i click "New" Button a more detailed Tabview appears on the right side with some additional informations. I was playing around with ember and so far i just implemented some of the views and the routing. Im stucked as i have tried to implement the event that updates the textfield below the table. It updates once but after it has transitioned into the new state(newRoute) nothing happens. I know the code is very raw, but it is just a test to understand how this works in ember.
Ok the solution was easier than i thought. The problem was not the state changing. It was more a problem of how to access the data and how to effect the change of binded data. I realised too late that i needed to understand how the variable access works in Ember and what exactly the App.initialize() method does. So App.initialize() initializes all Controller classes in the router. If you want to access any variables within a controller you have to get the access over the router like
{{view Ember.TextField valueBinding="App.router.tableController.person"}}
Secondly i wasnt familiar with the usage of the set and get methods in Ember and the difference between extend and create. I wondered before where ember instantiates my object.
So my problem had nothing to do with states it was just a totally misunderstanding of the ember framework. Im a noob thats all.
Ok, this is the first shot of the answer.
I think the main issue is just a typo gotoHome instead of goToHome in the template.
By the way I get rid of some deprecation warnings by using <button {{action }}></button> instead of Ember.Button.
There is some other warnings when I click on the table, because you are referencing some properties which don't exist.
here is the corresponding fiddle: http://jsfiddle.net/Sly7/rKw9A/25/
Since I don't understand how it should work exactly, I'm not sure of the overall behavior. I let you explain me the flow (by editing the question please).
Any other comment is welcome :)

rendering views dynamically on EmberJS

I just having a little trouble to implement a special kind of view for Ember, I'm digging on the source for days but can't find how to make it work... Can you take a look and tell me what's wrong? It's a small code, a specific problem when rendering one view from another (it's not doing the binds right...).
The sample code (with comments) that demonstrate the problem is here: http://jsfiddle.net/wilkerlucio/rUUuN/
Edit:
Just to clarify, I'm trying to do a view that dynamically render another view. It can be useful for a lot of implementations, like tabs for example. On tabs you have the tabs and the container that shows current tab, so, the view that I'm trying to accomplish is like this current tab container. Each tab has it own view, and I need that my view be able to render the view for the current tab.
I know I can do things like just hide a view and show the other, but it's not the way I want it right now. This CardView that I'm creating should have a binding to a property that will return a view instance, and the CardView will render this view, and will update if the property that points the view updates.
You can see a more full covered example about what I'm trying to do here: http://jsfiddle.net/wilkerlucio/Ztdpb/
Thanks
I think that you need to specify the template as such:
App.CardView = Ember.View.extend({
defaultTemplate: SC.Handlebars.compile('{{App.obj.value}}')
});
or
App.CardView = Ember.View.extend({
templateName: 'sample'
});
If you are planning to have many child views, then you may want to try to use a collection view.
This link is a bit old, but it is still not bad: http://guides.sproutcore20.com/using_handlebars.html
I've also blogged about how it implemented CRUD operations with Ember (SC2) here.
Hope this helps.