I have an app where the menu system is built dynamically using metadata fetched at startup. Based on this data, and menu selections, I need to craft a "filter box" where user can input search criteria. The "main" View consists of a filter box plus a search results panel where result(s) are rendered in accordance with their classes.
Can I model the Filter Box as a Backbone.js Model? It does not have any data fetches from the backend as its composition depends entirely on the menu selections + the metadata? E.g. when user selects "Sales" menu then the filter box might prompt for "Sales Order Number" whereas when user selects "Material" then the filter box might prompt for something else.
I would then use this widget as component of the "main" View, along with a set of results views made up on the fly. As users make their menu selections, this main View will un-render the existing filter box and recompute and re-render a new one. Other components on the screen could query the Filter Box for its settings.
The examples I have seen so far always have a url and a server fetch, save, etc. The only url-free example on the tutorial page says it is a "contrived" example. I was wondering if a backend provider is necessary and programming will be full of gotchas without conforming to this requirement.
Thanks.
You can have models without url property defined. One of the building blocks of Backbone is the Sync object, that will help you when pulling and pushing data, ideally from/to REST endpoints. For this to work you need to tell where the data are served, and to do so you set a value to url on Models or Collections.
If you don't need server comunication but you just want to use the utilities provided by simple Model or Collection (such as event handling, filtering, etc..) you just don't set url and you are good to go (just keep in mind that methods like fetch or save won't work).
Yes you can use Backbone for your DOM logic too. A model doesn't need to represent data from the server. Do whatever you like with the few basic elements of Backbone, simply use them when you feel like it'd do a great job :)
Related
Let's assume that I have 2 tables in my database, a user table and a folder table. They are matched by two models (beans) in my backend java code and similarly by to models in my extjs client side. Using viewmodel architecture, I want to create a form that shows the username and the amount of folders they have created using viewmodel bindings. Each folder in the database has a CREATE_USER_ID field that contains the id of the user that created the folder. How do I go about loading the required data?
Viewmodels are not designed to load data directly (and not designed to load non model data at all). You've got two options:
Go model (recommended). Two sub-options:
Add folder_amount field to your client side user model. On the server side this does not necessarily need to be added as well as you can adjust your API feeding data to client to add that field dynamically.
If you want to keep your client models exactly matching their server mates, use viewmodel in conjunction with associations (see example here, scroll down to Associations) to load folders themselves, though in the UI only show the amount of them. Mind that you don't need to load all folder fields but just their IDs.
Stick to your own fancy non model approach, but this won't have anything to do with viewmodel bindings. This may be, for example, making an AJAX call to retrieve the number of folders when user data is rendered in the UI.
I have a nontrivial Angular SPA that uses ui-router to manage multiple views, many of which are visible at the same time. I need models to be visible across controllers, so I have services written that allow me to have controllers pull down fresh copies of model data that has been updated.
I apologize in advance for the length of the question, but I will state the problem then state what I have done to address issues I'm sure others in the Angular community have struggled with.
I believe my problem is not understanding the lifecycle of controllers / views, because I get behavior where a controller initializes correctly the first time I go there, but then seems to never run again, even when I navigate to it using something like $state.go("state name").
In one view (contrived example), I show a summary of information about a customer, and in another view I allow a user to update that customer's more detailed profile. I want a user to edit, say, the customer last name in the detailed view, and have the summary view automatically recognize the change and display it.
I have a fiddle that shows 3 views and a simple password changing Service. The flow goes like this:
You can see each view gets initialized and displays the initial password retrieved from the service. All views are in sync with the DataService.
The middle view allows you to enter a new password and change the one stored in the service. Console logging confirms that the service picks up the new password just like you would expect.
(odd behavior #1) When the DataService receives the new password, I would expect the other 2 views (top and bottom) to display the new one. They don't... they still display the initial password.
There is a button to allow a user to go to another state via $state.go("state name") (a child state of the original) which also retrieves the password and displays it. This works the first time (see #5). Now the top view shows the outdated password, the middle view shows the new one, and the bottom one shows the new one as well. This seems normal, since the new view is invoked after the DataService contains a new password value.
(odd behavior #2) If I click back in the middle view and change the password again, and click the button to change states again, the bottom view (which updated just fine in step #4) no longer updates its copy of the password. Now all 3 views show different passwords, even though I am using a single service to pass values between controllers as suggested pretty much everywhere you look for Angular best practices.
Some possible solutions:
Tim Kindberg has an excellent slideshow here that seems to recommend using ui-router's state heirarchy to "pass" data among views that need to pick up values from other views. For a smaller-scale app I think I would settle on this, but I expect our application to have 30+ views displaying data from over 100 REST endpoints. I don't feel comfortable maintaining an application where all the data is being shared by a complex inheiritance tree. Especially using a routing framework that is at version 0.2.8.
I can use events to have controllers listen for changes in the data model. This actually works well. To accommodate performance concerns, I am using $rootScope.emit() and a $scope.$onRootScope('event name') decorator I found on here. With this approach I am less concerned about event performance than I am about wiring this huge app with a bunch of event listeners tying everything together. There is a question about the wisdom of wiring a large app using angular events here.
Using $watch on the value in the DataService? I have not tried this but I am hesitant to hinge an app this size on hundreds of $watches for performances reasons.
A third-party library like bacon.js (or any of a dozen others) that may simplify the event spaghetti, or create observable models that my controllers can watch without the risk of $digestageddon. Of course, if there is a concise way to handle my issue using Angular, I'd prefer not to muddy the app with 3rd party dependencies.
Something that lets controllers actually reference .service modules by reference, so I don't have to depend on tons of event wiring, complex state hierarchies, 3rd party libraries, or seeding the app with hundreds of $watches and then kicking off $digests to update controllers' references to Angular services?
Some solution that relies on time-tested OO and design patterns and not a 3rd-party library or framework that has a version that starts with 0.*.
Thanks in advance... I appreciate the help!
This is no problem of ui.router. If you intend for your model (your data service) to be a single source of truth, you have to refrain from destroying it.. err.. the reference to it that is. And in your case, assigning a primitve (a string) directly to the scope, instead of a reference to it. In other words...
var password = {pw:'initial value'};
and then later setting/binding only on
password.pw = newpassword
{{password.pw}}
Heres a fiddle. And also here is a short little read on scopes, It also includes a video of an angular meetup where Misko talks about "always have(ing) a dot in your model" link and how the $scope is a place to expose your model, not be your model. (aka not a place to assign primitives like password = 'initial value')
Hope this helps!
try remove the animation property of your ion nav view.
remove the property
animation="slide-left-right"
it would be ok.
I'm diving into the whole "single page application" and Backbone.js (specifically Marionette) stuff. I'm working on a decently complicated application. I'm wondering how you set up the router to handle nested views so the "containing views" are also rendered. For instance let's say I have an Admin section and under that I have a Users section. Under Users I have tabs to "Add User" and "Search Users".
If I've selected "Add User", I imagine my URL has the fragment "#admin/users/add". That routes to a view that has the add user form. However, if you go directly to that URL I want to show that form again, but also the top navigation bar with "Admin" highlighted, the admin specific sidebar with my admin navigation and have "Users" button highlighted. I need the whole HTML page, not just the Add User ItemView.
How to do say when the page first loads (refresh or from a bookmark), to load the html structure and "parent views" as well? Thanks!
This is the way you need to think about the app's behavior:
the controller needs to create view instances and pass in the data they need (models, collections, etc.), and then display the views within the regions
the ONLY thing the router does is is match a URL to a controller action (i.e. "if this URL is entered in the address bar, the application should launch this controller action")
So bascially, this is your problem: you're missing a controller action (e.g. MyApp.AdminApp.Users.New.newUser() which will render the views you want, which you can then call from your router...)
One thing that helps (although not related to the problem you're currently facing), is to always call the navigate method with trigger: false (which is the default). This ensures that your app is behaving properly and that the router is limited to matching URLs to controller actions.
Regarding the menu (with highlighted current entry), I would make it a separate Marionette module (https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.application.module.md), and have a collection of models (that don't get saved on the server) to list your menu entries. That way, you can manage the current entry by setting its model activeattribute to true (and checking that attribute in the view to highlight the current entry).
This is probably a lot to take in at first, but after a few more hours of working with Marionette it will all make sense...
(Shameless plug: I'm writing a book on Marionette that takes you from beginner to fully independent with Marionette. In there, I'll be covering this type of functionality, especially the menu management and how to highlight the current option. If you'd like to check it out, there's a free 55-page sample at http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf and the book (which is still being written) is at https://leanpub.com/marionette-gentle-introduction)
I had the same question a time ago, what I strongly recommend is to get involved with Marionette layouts, collections, composite and collection views, regions and how to display content within templates.
Is not hard as you keep reading tutorials, I recommend reading lostechis.com which is a very educational blog from the creator of Marionette, Derick Bailey, also the Marionette Official website.
This is just about educating yourself doing tests and when some question comes to your mind search it and if not found dont doubt to ask it right here.
For the side bar and some other stuff you can just use JQuery-ui or Twitter bootstrap, it is very easy to integrate them with backbone/marionette views, but you just have to read to achieve that.
Which you luck.
I'm looking to make a step by step form for an "instant quote" type of thing on my website. I made the following image on photoshop, it's pretty self-explanatory that I want the user to enter information at each step of the form and ultimately submit the form at step 3 (going to the next step should be seamless, without a page reload).
Can someone please give me some general pointers how I should go about this? This is my first project using backbone.js and it would really help to have a high level overview of whats the best way to approach this particular widget.
Thanks
I would structure it as follows:
1. Implement model for data to be collected
Have a single model which collects the data across the stages. Implement storage of this model, and allow partially-completed data. (You'll probably want to store this at each stage, so the user can come back at a later date).
2. Implement a generic 'multi-stage' view
This should be responsible for rendering the tabs/stages at the top, rendering navigation elements for backwards/forwards, and for rendering a sub-view.
3. Implement specific sub-views for each stage
These should operate on bits of the above model.
4. Implement routing
You might want different URL routes for each sub-view, or you might want the same URL for the whole multi-stage process. Either way, the router needs to create the outer multi-stage view and the inner sub-view (or views), and connect them together, together with the appropriate model.
5. Hint: make use of pub/sub
Don't couple your views tightly. Use some form of pub/sub to raise and listen to custom events. (For example: http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/)
To addition to stusmith, I just made an example of a backbone js multistep form. Feel free to have a look and copy it.
https://github.com/michaelkoper/backbone-multistep-form
I am developing a JavaScript heavy single page app with Backbone.js. The goal is as follows;
The user starts with a set of multiselect boxes which are populated with filter elements to query a set of resources. These multiselect boxes are dependent of eachother. Furthermore, the elements in the multiselects are queried from the server and depend on the user that is logged in, in other words they depend on the resources that are associated with the user that is logged in.
The user fills out the multiselect boxes and presses a "filter" button. When this is pressed a collection is fetched, thereby using a set of query parameters (multiple array values) to get the set that reflects the filter elements.
When the collection is fetched the view with the resources appear. This view has multiple subviews, and it must be possible to drill down on specific resources while maintaining state (the collection that is fetched as a result of the query parameters)
How to maintain state in a Backbone app in such a use case? I've looked through many examples but all are to simple to be useful.
I am new to backbone.js and trying to develop a single-page app using Backbone.js. In my limited understanding of backbone.js documentation, I did not come across a better way of maintaining state using backbone.js core. However, in the past, I have worked with jStorage: http://www.jstorage.info/ , a simple wrapper plugin for Prototype, MooTools and jQuery to cache data (string, numbers, objects, even XML nodes) on browser side. It is simple to integrate and get started. In my app, I am going to use this for the time being... I thought this could be shared...hence I mention it here when I came across this question... I hope this would be of some help