So I've had a look around and can't really find a solid answer.
I have a model for page and I have a route to get the data from an Api and the data comes though into the ember inspector but when I try to call it on the page it doesn't show.
https://github.com/stagfoo/ember-wip/blob/master/app/templates/page.hbs
I've tried {{title}},{{Title}} {{page.title}} nothing shows.
I've read I need a controller but I've seen examples without a controller do the same thing.
What an I missing?
https://github.com/stagfoo/ember-wip
You should try
{{model.title}}
Also, I don't understand what you are trying to do in your 'then(...)' at https://github.com/stagfoo/ember-wip/blob/master/app/routes/page.js.
Indeed, an Ember route exposes a model to templates via the value returned by its model hook. When calling an API, this value is a Promise that will be resolved after server response. Ember handles this Promise itself and the template will be dynamically updated.
So you do not have to call yourself 'then' unless you have to setup other data and need to wait the Promise resolution. Moreover, in this particular case, your 'then' implementation do nothing but accessing a value.
Do I miss something ?
Related
I am using https://github.com/ezraroi/ngJsTree and I have come across the following problem.
My ng-model is a AJAX request and when my controller fires, data is not yet ready, so it does not render anything.
<div ng-controller='myCtrl'>
<div js-tree="treeConfig" ng-model="treeData" should-apply="ignoreModelChanges()" tree="treeInstance" tree-events="ready:readyCB;create_node:createNodeCB"></div>
</div>
https://plnkr.co/edit/IRaqvd0DPcqkxgo0xoqa?p=preview
Depending on the structure of your application, you may have a few alternatives to handle this situation. Create a service that is responsible for reading the data. Then you can do one of the following:
make router to wait till the reading is resolved before
navigating to the view. Here is a related SO question: AngularJS $http.get with resolve
add event listener to the controller and
make service to emit/broadcast event when the data is ready.
In both cases, you may want to read data from service.
I'm using $resource to interact with my backend.
I've a page that shows the list of items coming from $resouce.query() .
gcResourceClubs.query({
page:(($scope.currentPage - 1) * $scope.itemsPerPage),
size:$scope.itemsPerPage})
.$promise.then(function(res){
$scope.clubs = res
});
(I use a promise because the values are used to set the pagination in the html)
Now, in another directive (the one of the form) I perform this operation.
gcResourceClubs.save(club); which saves the club to the server.
(I tried with scope.clubs.$save(club) but it POST data as url encoded rather than a json object, so it does not work with my backend. I thought that in this way the list of object would be automatically updated, is it true?)
Now, when the resource is created, how can I easily re-render the list?
I thought of making a promise over the save and do the same logic as of the promise of the query. Or to redirect the app to the page that display the list.
What is the "correct" way to do this? Isn't there anything automated for this? (I used for a while backbone, and there I had events, but in angular with directives and controllers I'm not sure that's the correct way of doing it)
I am developing one directive for my grid control, and i need to get some common resource data from server before i build the grid control.
How i can write initialization function for the directive? I need it to execute before loading the control to DOM and it has to be something like lazy one(it should execute only when the DOM got directive).
I have written one function in the controller of directive to get the resource from server, but the directive execution is not waiting for the server response. it is just continuing the execution and throwing resource value is undefined.
Please anyone help to me solve this?
Either you could use the resolve function of your state to have the data loaded before the controller is instantiated at all, see https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
Or you could do it the angular way and
initialize an empty array for your data in the controller
make the ajax request in the controller, and update the array when the response comes in
watch the array to update the dom. If you simply use ng-repeat to show the data, that watch will be set up automatically. If you do "manual" DOM manipulation you must use $scope.$watch() yourself.
I'm persisting my model from my controller via a call to this.get('model').save(). This results in a PUT to an endpoint that just returns a 200 message and nothing further. On the server side however, some custom rules are in place that are changing the data so that it's different than what Ember sent to the server. This puts my UI and my persistence tier into an inconsistent state.
What's the correct way to make sure the UI reflects what the correct state of the data after it was persisted to the server? Should my server-side endpoint return the updated model? I've tried just calling this.get('model').reload() after the save() but the UI isn't updating. When I did this I could see that it's asking and getting the new model from the server but as I said, it's not reflected in the UI.
I feel like there's some knowledge fundamental to Ember that I'm missing. Thanks for the help.
I guess that you are not waiting for the record to complete the updating process.
http://emberjs.com/api/data/classes/DS.Model.html#method_reload
So this would be:
this.get('model').reload().then(function() {
console.log("Now I am ready !");
})
Always remember that javascript is async.
I read many Backbone.js tutorials, but most of them deal with static objects.
Of course, I have data on the server. I want a tutorial that shows how backbone.js can communicate with the server to fetch data, post data, etc.
This is .sync, right? I read the backbone.js documentation, but still fuzzy on how to use this feature.
Or can someone show me an example?
According to: http://documentcloud.github.com/backbone/#Sync
Backbone.sync is the function that Backbone calls every time it
attempts to read or save a model to the server.
But when? Where do I put the function? I don't know how to use it, and the documentation doesn't give any examples. When does the data get loaded into my models? I get to define when...right?
You never really have to look at .sync, unless you plan to overwrite it. For normal uses, you can simply call model.save() whenever you want and that will execute a post or put (depending on whether the record exists already). If you want to get the data from your backend, use collection.fetch()
You'll of course also need to specify a URL, do so through your collection attribute, collection.url
You can override Backbones native sync functionality if you override it:
Backbone.sync = function() {
//Your custom impl here
}
After that this function is called whenever you call a backbone function like .save() on models or .fetch() on collections. You do not have to care about data transport anymore.
I would suggest taking a look into Backbones source and look how the default sync function is implemented. Then create your own or adopt your server to support the native function.
They are not free, but the following screencasts both have a piece on backend work and how to send data to and get data from Backbone.
Tekpub is a 9 part screencast about asp.net MVC3, with the whole 6th part about using backbone to write an admin module to manage productions. it shows all about handling routing in MVC3 and sending & receiving data
Peepcode
http://peepcode.com/products/backbone-js about basic backbone stuff
http://peepcode.com/products/backbone-ii about interactivity
http://peepcode.com/products/backbone-iii about persistance (it's this third one you will need for server connection information).