I am having some challenges trying to use JQM and MVVM. I am also trying to use knockout.js too.
For example, currently I am trying to implement a navigation similar to the iOS page control(the little dots indicating you can swipe to navigate to the next page):
The data to be displayed is fetched from the server and it needs to be displayed in JQM pages. So the JQM pages need to be created dynamically.
From the UI perspective, I plan to use a fixed footer containing the dots(based on the number of pages).
The problem is with the view-model which needs to persist between the JQM pages, as I do not want to load data from the server by page, data is loaded at once and it is expected that the client will display it in pages.
I could have a view-model holding the data and living through-out the life of the application and just bind each page view to it.
Instead, I want to keep the view-model alive as long as it's really required by the view.
The solution I am thinking is to catch jQueryMobile page navigation events and see if the navigation is between these pages.
If it's not, the view-model should be removed(assigning it to null).
Next time if any of these pages needs to be loaded(for example by navigating back to the last page), the view model is re-created(data is fetched from web-site again).
Is there a better approach?
You should have a look at the Persistent Footers page on the jQueryMobile documentation.
Why don't you try the JQM pagination plugin along with the persistent footer #calavoow mentions?
That would give you dragable JQM pages with a set footer.
Related
I am creating a project where I need to create a view with search textboxes and a dropdown which would be populated from the server. Same view also have a grid which would be populated based on the search criteria enter/selected by user.
I want to know what would be the design of the page in terms of showing both on same page. Should I create a partial view for the grid or Search panel or add both in the single view?
Note that dropdown list would need to be populated from the ViewModel. So what is the common practice in the situation. I am new to this I have done few pages but with lot of code, session and ViewBags and I think I am not following recommended practice.
Actually, the design for your web application is according to your requirement.
For example, if you want grid to work with other datasource or view, you could build it as a component, then if you want to use it, you could directly use this component to avoid write the same codes for multiple time.
If you want to use same grid to show in some other page, you could build it a partial view, then you could directly call this view to show something.
Is there a way to preserve the contents of a tabbed component when toggling between them? I found #PreserveOnRefresh but that only seems to work when refreshing the browser.
Assuming you mean navigating between Routes/views rendered as tabs, I think what you're looking for is the #SpringComponent and #UIScope annotations. Add these to the relevant classes to preserve any input fields and outputs when toggling. Note that you'll still need #PreserveOnRefresh if you want to retain those fields when refreshing the page itself.
See: Vaadin Component as Spring bean for a breakdown of the specific functions the two annotations serve.
I am using a kendo UI grid on a view, which is part of durandal 2.0 app using knockout for mvvm.
On a specific view, there is need to display a kendo grid having dynamic number of columns,
so every time view is visited, grid columns may have different count than the last visits.
Now as caching is enabled(applicable to this view too), so for subsequent visits grid rows are changing to reflect data change, but grid header(including number of columns) remains as it was during very first visit to view.
Note: if i disable caching for compose which is used to compose this view, grid loads fine with varying number of columns every time, but can't disable caching just because one control is not loading fine, and due to business needs.
so i wanted to know is there any way i can tell durandal to run viewattached event every time a specific view is visited, if not possible then is it possible that i can ask Durandal to recreate kendo grid control on every visit(so it doesn't uses what it created and having in cache of view)... i also tried always run viewattached on comose, but that brings a flicker when visiting the view hence i feel kind of disables caching for compose(but i can't do that a this compose is common for more than a view, which all should use caching)
Your viewmodel should return a constructor function instead of an object literal. But without seeing your code, it is difficult to identify your specific problem.
I am using primefaces 3.5, the latest release for our development work! In our homepage, we display the rows of data. When we click a row onRowSelect (SelectEvent) event we navigate to the next page with the Navigation Handler. On this landing page, I have a dataTable with expandable rows which has data in it. When I click the rowToggle icon the data is displayed in row expansion section (as it should normally).
What I need is to show the data automatically when page is loaded, with the rowToggler displaying down.
How can I achieve this?
This can be achieved using a bit of JavaScript (jQuery). All you have to do, is as your page loads call the click action of the RowExpander.
Something like this would work :
jQuery('.ui-row-toggler').click()
You can place this in your body onLoad attribute.
Source
http://forum.primefaces.org/viewtopic.php?f=3&t=8537
I'd like to create a content box with two tabs. Each tab is associated with a table which contain server-side data. My thought right now is just to load the page with 10 rows worth of data for each table and hide/display each table respectively to begin.
I was then going to toggle display of the tabbed content based on either click events on the tabs OR GET parameters relating to which tabbed content is being acted on (through pagination, for example).
Should I just handle this with UI tabs or is toggling display reasonable in this case? Since the user can update their data, I assume that caching via the tab UI isn't helpful in this case.
Thanks,
Brendan
From what I understood, I don't think its going to be overkill. If you are worried about performance, ten rows for 2 tables is just 20, which is not much. Paginating will also get 10 more rows for each 'click' so it's still good there.
Do use tab activation through click events, but also use GET parameters to know in which page the user currently is, from which tab.
Regarding caching data that you know will change, it might be unnecessary (see my 1st paragraph). Caching can sometimes become unwieldy, so don't add an uneccesary layer of complexity.
As someone who suggests simplicity above all else, I'd discard the whole 'tab loading' thing but leaving the tabs per se (i.e. the interface elements that will be clicked) and when the user clicks each tab, it takes to another page with the tabs too, old-fashioned style.