Redirect to another view with parameters/results on button click

[Piotr Perak]

I show search form with some filters, then press search button which calls search function in my viewmodel.

In search I call server and would like to display view presenting results. I have no problems getting data from server but I don't know how to display this data in other view.

I don't want to display it in the same view as in masterDetail example. I would also like back back/forward buttons to navigate between search/results views.

[Evan Larsen]

I would recommend looking into Knockoutjs and doing the tutorials.  That will give you a good idea of how to bind results to the view.  Durandal uses knockoutjs so learning how to leverage this would be very beneficial.

Once you get the results on the page then I would start to think about the back/forward buttons.  This is called modifying the browser's history state.  Durandal has an addon which you can opt-in to use called router.js.  router.js uses sammy.js.  Sammyjs is usefull for modifying the browser's history state so you can take control of the back/forward buttons.

[Piotr Perak]

I would recommend looking into Knockoutjs and doing the tutorials.  That will give you a good idea of how to bind results to the view.  Durandal uses knockoutjs so learning how to leverage this would be very beneficial.

Once you get the results on the page then I would start to think about the back/forward buttons.  This is called modifying the browser's history state.  Durandal has an addon which you can opt-in to use called router.js.  router.js uses sammy.js.  Sammyjs is usefull for modifying the browser's history state so you can take control of the back/forward buttons.

I know how to get results on one view. Just create two templates with data-bind="visible: someCondition" and switch between them in viewmodel.

My question was if that was the only solution. I would like to achieve the same behavior as when you switch between pages in navigation example. With nice transitions.

 

[Rob Eisenberg]

You can use the compose binding yourself against any overservable. This can allow you to switch out different modules (and their views), optionally with a transition.

 

--
You received this message because you are subscribed to the Google Groups "DurandalJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to durandaljs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Rob Eisenberg,
Blue Spire Consulting, Inc.

Caliburn Project

850.264.3996

[Piotr Perak]

I tried this:

searchViewmodel {

    search: function () {

        this.activeScreen({ model: 'viewmodels/results', transition: 'entrance' });

    },

    types: ko.observableArray(["A", "B"]),

    selectedType: ko.observable(),

    activeScreen: ko.observable()

}

searchView:

<select data-bind="options: types, value: selectedType" />

<button data-bind="click: search">Search</button>

<div>

    <div data-bind="compose: activeScreen"></div>

</div>

Now this shows the results screen with nice transition, but activate function isn't called.

Also I still don't know how to pass that selectedType. I imagine I should be able to pass it to the view I want to show and there in activate function go to server to get data to display.

But probably I'm thinking wrong.

[Rob Eisenberg]

The composition engine doesn't call activate by default on any view model. That's handled by an activator. For example, the router has an activator internally and that's how that happens. You can make your activeScreen into an activator if you like by using the viewModel module, like this:

activeScreen: viewModel.activator()

You can then set the active screen like this:

activeScreen(...);

just as if it was an observable. But, you need to set it to a module, rather than a composition settings object, like you are now. Assuming you do this, and you want to pass data to the activated item, you could do that by calling activateItem, instead of just setting the property, like this:

activeScreen.activateItem(module, activationData)

Does that make sense?