In my marionette application I have one view which holds handlebar template within {{#each}} expression to display collection of information. Now I want to add "Edit functionality to information displayed using this template. I am thinking of defining one more editable template. But I need help on How should I;
1) render editable template on click of some button
2) send displayed data to editable template as source
3) after changes save request complete how to restore display template with updated values without refreshing complete parent view.
Can any one guide me to implement this functionality; or else can suggest me other better alternative approach to do this.
Related
So I've been going round and round trying to figure out the best way to have a footer that has a hidden panel for actions that slides up. The site is pretty basic, it has a header, content area and footer. I made a simple wireframe to explain this a bit easier:
So ideally the content panel are say something like posts, when clicked I would like to open the Secondary actions panel with the edit form prepopulated with the data from the content panel. If the Icon is clicked I would like to pop that same Secondary actions panel with a blank add new post form. Where I struggle with this is the convention of how to do this and what is the best via AngularJS. The secondary actions panel and footer are wrapped within a FooterController, but the content panels are wrapped inside a separate controller. I'm not sure whether I should be using a directive or a service.
I'm currently utilizing angular-ui-router but this doesn't manage the ui events that I need to happen.
Any advice would be greatly appreciated, I'm very knew to AngularJS so I'm trying to learn the right way of doing things with AngularJS rather than just building some hacked up crap that I'll end up scrapping later on!
Thanks!
I think secondary panel should have its own ui-view (with its own controller) instead of staying inside the footer.
For it to know which item has been clicked, you can pass through the ui-router state.
Let's say your control panel has post id 1234, then it should have a ui-sref="stateName({postId: post.id})"
And this state in ui-router will specify which controller/template it should fire, and inside that controller you can get the id from $stateParams.postId
You can then use the post id to get the post either remotely or from service if you have stored them earlier.
I got to design asp.net mvc pages for registration functionality.
Functionality has some group of categories,like- set up password , security , some business and agreement questions.
Currently all this functionality is in one single page, but the new requirement is to separate each question group into separate pages. So now i have to add 'Back' and 'Next' buttons on these individual pages to provide an option for the user to travel back and forth the pages for editing.
I need suggestion or idea on how can I achieve this. I am looking for some best design with much code re usability as i need to implement this in desktop and mobile. Here are some of my ideas-
1) Do i need to create multiple html pages? If i create multiple views, how can i access the html element values of the parent view?where can i store the parent view's html element values ?
2) Do i need to create one html page and call multiple partial views in it? If i do this, can i get the values of html elements of the partial view when the user clicks 'Back' button?If i do this the url will always be the same irrespective which question group the user views.
Any help on this is much appreciated!
Thanks,
Wh
I am working on a template builder using ractive js and partials. Once the user finishes building the template he can save it. At this point the HTML code gets saved to the database.
The issue appears when he wants to edit it as everything got saved as plain html so we don't have any mustaches so we cannot bind it anymore.
If I know which template was applied initially, can we bind the template to a specific ractive so we can update the mustaches?
An example could be the background-color of a certain div element
Update: 26-06: Some more details on the workflow: the user drag and drops elements similar to mailchimp. I have some variables that are replaced - like the name, phone number, listing details etc.
I save the generated html in the database, but I think it would be better to serialize all replaced data and when they want to edit what they built, I load each partial and apply the saved data to each template.
Thank you
I have a situation where I need to populate a drop down list on my gsp once a choice is made in another drop down list. I am not sure how to go about this. I have the parent dropdown list populated via a model map right before the gsp is rendered.
I can easily provide model info to a gsp from my controller right before the gsp is rendered but I have trouble creating and passing a model to a gsp on the fly i.e. once the gsp is already rendered how to do it? Should I send it as ajax or how? I just can't seem to see it. Im not looking for an exact code answer as much as conceptual advice.
The first step I am doing is to try to invoke a function in the controller when the parent drop down list on the gsp is used to choose a value:
<g:select name = "seleInst" from = "${instlist}" style = "border-radius: 5px" onchange="${remoteFunction(action:'updateUserlist(this.value)', controller: 'admin')}"></g:select>
The problem I face here is how to pass to the controller method the argument(value selected in parent dropdown list). I just put it in parenthesis above to help me think. This is probably not the correct syntax.
Thanks.
The correct way to do this is to populate the second list via ajax. Using jQuery this is pretty simple.
Attach an on("change") event listener to the first select list.
Make an ajax call to get a JSON response from your controller, passing the selected value.
Use the JSON response from the controller to populate the second list with option elements.
I can provide detailed code examples of each if that is really needed, but you stated you just wanted conceptual advice so let's start with that.
updated
Seeing that you are using the remoteFunction (which is going away in future versions of Grails I might mention) you are going to struggle a bit getting your parameters in there correctly.
However, according to this post it can be done. If you are using a 2.x version of Grails then your provider will be jQuery. I have always stayed away from the remoteFunction tag personally and written my own jQuery.
What's a good way to organize views? Let's say I have a div that will contain a view from an admin panel perspective of users - there will be a list of users along with options to choose how many to display at a time, sorting options, what page to be on, filters, etc...
Would I want an outside view that contained everything except the table and data? And then an inside view that contains the table (along with the data)? And would the pagination have it's own view? And how would the pagination view use the click event to update the user view? I'm just confused on how to organize the views while still being able to have different events trigger other views to render() / collections to fetch().
So a basic hierarchy would look like:
- User View
- Table
- List of Users
- Pagination
- List of available numbers to click
- Filters
- Possible filters to apply to the data
Yet clicking a filter or number in the pagination should be able to get the collection to fetch() new data and refresh the view;
I second dogenpunk. I would have one User Collection / View. Because the whole hierarchy you describe above is about that one User Collection. All functions of it manipulate that collection and then you rerender the User View.
You could have a second User View, one single User, tied to a Model if you want to apply changes to the server for that user only.
I try to reflect my server-side MVC structure as much as I can.
Everything that can be put into a plugin, I do so, and then I keep those plugins in a separate location to the controllers which call the plugins. So in your case, the table view for the list of users would be held either in a table plugin, or possibly in the 'users' module if it was code I was really only going to use once.
If I need to override the output of the plugin, then I store the view inside the module folder.
What I try to avoid doing is storing views purely by the type of HTML inside them, so I wouldn't store a module's view as 'table' because that will get confusing if later it changes to a list. Obviously, if I have a 'table' plugin then the view for that is going to be a table, but then changing the JavaScript view means just changing the plugin call from 'table' to 'list' anyway.
My 2 cents to your original question. If you really want to make it a MV*, a pagination would be a view, your table would be a view. And have your collection to send out ( trigger ) events to change your view. And another questions I would ask myself also is what will be affected when my collection changes? For example, in your case, I don't think the collection changes will affect your userView directly, it only affects the Table and Pagination.