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.
Related
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.
I need to rerender whole page application after language has switched. I don't like to use observers for it because of performance issues.
Language switch is done by a Ember.View. I tried to rerender parentView after changing Ember.I18n.translations but running into a known bug. It works one time but Ember Inspector shows parentView has dutzend of children views of it's own afterwards. After another switch parentView got destroyed. Just like demonstrated in this JSFiddle.
Here is simplified code of my view:
export default Ember.View.extend({
templateName: 'language-switch',
languageChanged: function() {
// change language
var language = this.get('controller.language.selected');
Ember.I18n.translations = translations[language];
// rerender page
this.get('parentView').rerender();
}.observes('controller.language.selected')
});
There is also a discussion about that problem on discuss.emberjs.com. I tried the suggestions there but they don't work. Last post suggest a work-a-round to map over all views, rerender them and afterwards use a transition. I don't like that one since I am afraid getting side problems by that hack.
I am pretty sure there must be a way to do a language switch in Ember with ember-i18n but what's the right way to do that?
Update:
I tried to implement the hack from discuss.emberjs.com. It's working but it's very limited. I implement it like this in the view:
var self = this;
var currentRoute = self.get('controller.currentRouteName');
this.get('controller.target').transitionTo('loading').then(function(){
self.get('controller.target').transitionTo(currentRoute);
});
Problem is that all data stored in model is lost. I did not find a way to get the current model and use it in transition. Also query parameters are lost. That limitation makes this work-a-round unacceptable for my application.
Update App.reset():
As suggested in comment I tried to use App.reset(). It works better than transitionTo work-a-round but doesn't match all needs. If calling App.reset() queryParams aren't lost but model is reseted. I'm looking for a way to rerender application while keeping current model and queryParams.
It seems that mostly these problem is handled by a full page reload on locale change. E.q. one of the main developers of ember-i18n said so in this discussion.
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 :)
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 !
I'm having trouble getting ember to render a dynamic child view. It seems that once the child view is rendered, the binding is lost. Here's a jsfiddle
http://jsfiddle.net/zaius/XYzfa/
As you click between the two editor pages, the child view remains on the first view that was rendered. Is there a way to tell ember to refresh the view, or am I going about this completely the wrong way?
I'm brand new to ember, so any general feedback on my code is welcome too.
You should consider using Ember.ContainerView (see documentation) for such dynamic content.
Illustrating JSFiddle here (I also refactored your code a little to be more idiomatic).