|Help with observableArray not updating in view||Sean Malone||2/26/13 12:04 AM|
I am new to Durandal. I have a little experience with KnockoutJS. I am trying to populate an observableArray from json retrieved from a php file. I am then trying to load the array into a table. There seems to be an issue when loading the data into the table upon first load of the page. I perform a system.log(customers) just to make sure the data is in the observableArray, which it is. When I refresh the page, the data is loaded into the table like I want it to. It appears as if the observableArray is getting populated, but the view is not updating.
I was wondering what I am doing wrong for it to not load on the first load of the page. Here is the test site I've been playing with durandal: http://dev.codeplanetapps.com/spa/. Once it loads, click on "Customers." The page in question is http://dev.codeplanetapps.com/spa/#/customers. When that page is loaded directly, it works fine, but when I load the app from the main page and then switch to customers, it doesn't load the table correctly. Thanks in advance for any help.
Here is the view:
And here is the viewmodel:
|unk...@googlegroups.com||2/26/13 12:29 AM||<This message has been deleted.>|
|Re: Help with observableArray not updating in view||Sean Malone||2/26/13 12:30 AM|
I actually found an old post that talked about the viewAttached method. I moved all of my jQuery into there, and it fixed those issues. I also don't seem to be getting observableArray issue anymore.
Would having my jQuery calls inside the activate function screw up any of the Knockout stuff? I don't see how it would.
I'm not quite satisfied with my findings. I would still really like more opinions on this.
|Re: Help with observableArray not updating in view||EisenbergEffect||2/26/13 6:27 AM|
The reason that your code gets messed up inside activate is because it is asynchronous, but you aren't telling Durandal that it is. Activate is the correct place to put this type of data loading code, but you must return the promise from the ajax call back to Durandal, so it knows to halt databinding until after the call is complete. Otherwise, it's possible for ko.applyBindings to run *while* your data is populating which will mess up ko's observability. All jQuery ajax calls returns a promise. So, just return that from the activate method and everything should work. Your dataPicker call is a different problem. That needs to live in the viewAttached function because, when active is called, there's no view available yet. Your set timeout is a hack which may or may not work depending on how fast the browser is and when it triggers that. Move that to the viewAttached function...or better yet, create a custom ko binding handler and apply it with a data-bind attribute. That's the best way to do this sort of thing.
Blue Spire Consulting, Inc.
|Re: Help with observableArray not updating in view||Sean Malone||2/26/13 7:42 AM|
Thanks for the quick reply. Your answer helped a lot. I guess I missed the part about returning the promise. I have one more quick question. You mentioned that your return the ajax call to halt databinding until it's complete. If I were to have multiple ajax calls (for example sake), would I only need to worry about returning the last one?
Also, just a quick praise. I think you're doing amazing work. I've been a php developer for many years. I finally decided to checkout what all fun the frontend guys are having. I decided to go with jQuery, Knockout, Require, Sammy and Bootstrap. In doing my research, I found Durandal. It's awesome that you packaged exactly the libraries I needed into one framework.
I apologize in advance for any silly questions I might have in the near future, ha ha.
|Re: Help with observableArray not updating in view||EisenbergEffect||2/26/13 7:43 AM|
Your questions aren't silly, trust me. Regarding multiple ajax calls, you can chain promises together and return the result of the chain. If you google jQuery ajax promises I bet you will find some examples.