I'm using backbone js with an xml api data feed. I have a top-level model for each page that receives the xml and converts it into json. I then have additional methods in the model that return specific parts of the json model to the specific views through a controller. This is all working as expected.
I would like to periodically (via setTimeout) update the top-level model and have it fire the change event and update the views. My question is where I should handle/initialize the firing of this periodic event to update the model since it's not really a user trigger event?
I'd give my model a startUpdate() method, an endUpdate() method, and an internal onTimerUpdate() method that did a fetch. You can then call, on the model, the startUpdate() and let it run as needed, pausing it when it would be inconvenient for a server-side update to run (say, in the middle of a customer manipulation of the data), and restarting it after a client-side change had successfully completed a write to the server.
Better yet, you could make it a mixin and use it with a number of different models.
Related
I have a list of transactions that are generated in seconds, I am using a wrapper to get these transactions so I made a rest api to get the transactions according to the no. But in the mean time the transaction will get generated more so how do I show the recent on as they generate continuously .
I want to create a Block Explorer on the private Ethereum blockchain using node.js as backend and angular.js as frontend.
You could use here Websockets.
For example Socket.io - https://github.com/socketio/socket.io
Here is Socket.io compoenent for Angular: https://github.com/btford/angular-socket-io
So when your transactions are generated, you will send Push message to client, and client will update it's transaction list.
Possibly the most common approach here, id you have control of contract mods, is to include event emitters for every important state change. This exposes your contract transactions in a detailed (even indexable) and inexpensive way.
On the client, you can use event watchers. This are easily configured with AngularJS. When events arrive, they invoke callbacks. You can do what you need to support the UI or offchain storage in the callback.
For example, you can append a row to an array in to Angular's view model. Angular does a good jub of updating the view when the data in the model as changed. So, a live updated display of transaction events as they arrive is quite feasible and not especially difficult.
Hope it helps.
I'd like to add MongoDB / CouchDB as a backend for Fullcalendar. However I need to know when the event has been changed on the client side so I can trigger an update in the backend. Likewise I would need to set a delete callback that would be triggered once the event object was deleted on the client side.
Should the changes fail to propagate to the backend (connection or concurrency issues), the client side should revert to the oldest change saved in the backend.
From what I see about the updateEvent function it's at the view/GUI level and it's about updating/redrawing the View corresponding to the event. Can you please confirm this as well?
UPDATE: In essence I would like to add support in FullCalendar for object collections, collections such as those found in BackboneJS or AngularJS libraries.
I'm trying to port the code from existing backbone to backbone.Marionette application. Refer the following url for application that i have started.
http://www.adobe.com/devnet/html5/articles/backbone-cellar-pt1.html
According to my code structure,
I have 2 views in my code.
ItemView with a form
Composite View that contains list of itemViews for each li tags.
Initially on page load, it renders the data from db using fetch() call and appends all wine names to side bar. Then, on each wine name click, I can view its corresponding details.
My doubt is that, Everything works except listener from form itemView to CompositeView. I'll explain it in brief.
When i update/delete in the form ItemView, the particular li in CompositeView is not updated/deleted by listening to the event binder. It works if i use localstorage but not as server/db based app.
What should i do for listener to listen changes from form itemView and render it. Any suggestions would help me to continue furthur.
When using a Marionette CompositeView, the rerendering will be done for you. You do NOT need to add a listener to the model or collection, because Marionette automatically listens to those events.
If this doesn't solve your issue, put your code on jsfiddle so we have a functional example of the non-working code.
Edit based on jsFiddle :
I've added code that should make your example functional (hard to determine without a functional example) : http://jsfiddle.net/VvXDs/ Basically, I added an app-level message, and listen for it it the list to trigger render if necessary. Although this is functional, this pattern is bound to cause problems.
The main thing that is making your life more complicated, is the fact that you're managing the routing as if the application were stateless web app (more on that here http://lostechies.com/derickbailey/2011/08/03/stop-using-backbone-as-if-it-were-a-stateless-web-server/).
What's happening is that you have a collection with all of your chocolate, and a user clicks on a link to display one of them. Then, although you already have the data, you fetch a new instance of the model to display from the server. So obviously, the listener won't work: they're defined on 2 different instances (client side) of the same model (server side). (If you're worried about stale data, you should instead pass the same model instance to the view, and call fetch on that instance to update the data.)
A better design approach is to use the same client side model instance in both your menu and the form view. Then, when the model changes, the menu line item will automatically get updated (because they're using the same model instance, so the "change" event listener will word properly).
If you're interested in learning more about using routing in a stateful manner, take a look at the free sample to my book http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf (chapter "Implementing routing").
Remember: the code I added should work, but the design will probable make your development more challenging...
Our server saves the model, and returns the JSON as specified in the doc. The problem is, backbone.js issues PUT as soon as it receives response. Can it be because the model is sent without _id property, and the server appends that to a model?
If you believe that Backbone automatically issues a PUT based on the response to a previous request, you are confused. Backbone does no such thing. If you a see a PUT going over the wire, something in your code base (an event binding or otherwise) is calling either save on a model or a manual sync.
Otherwise, you'll need to post code in order for us to help you debug, but I can assure you backbone itself will not ever issue a network request that is not triggered by external code through one of a very small set of methods such as fetch, save, or sync.
As to IDs on the server, that should be perfectly fine. In fact, if backbone were to get confused and think that an existing model was a new model, it would issue a POST instead of a PUT, which is not what you are seeing.
I'm making a totally local Backbone app, no server-side included, and I provide the app with some initial local data. The data is actually the Collection data which is a json file and stored in a folder called data. So I provide the Collection with a url attribute which is data/datalist.json and use this.collection.fetch() to get the inital data. All works well.
But I want any update happens in View would save changes to the corresponding Model data in this Collection json data file. It seems that this.model.save({name: newName}) doesn't work for me. Every time I refresh the whole page, the app will still show the inital data file. So how should I change the data file when a item in View is updated, deleted or created? Do I need to set a url attribute in Model?
Model.save calls the Backbone.sync method, which by default maps CRUD functions to a REST api. If you want to use something other than REST for save/update/delete, then you need to override Backbone.sync.
There is a local storage plugin that overrides sync on Github, which is endorsed by Backbonejs: Backbone.localStorage
This plugin should persist your data while the app is running. You may need to extend it if you want to write changes to your filesystem (not sure, haven't used it myself). Hopefully this gets you started.