All navigation components should watch for changes in "page" and react accordingly about onsenui

[kruyvanna]

All components that perform navigation (ons_screen, ons_navigator, ons_slidingmenu, etc) should watch for changes in "page" (or behind-page, etc) and perform navigation when changes to page happen.

This is great!

Components that support stack navigation (ons_navigator and ons_screen) should give an extra (bindable) property to set the navigation approach (push, resetToPage, pop).

I understand the use case but cannot figure out the syntax to achieve this.
Could you give code examples of how they can be done?

[JoaoSaleiro]

Now that you ask, it would probably be hard to implement in the way I suggested because it would lead to a race condition hard do solve.

An alternative could be to use just one property (page) that could receive either a string (a pageURL) or an object (with properties explaining how to show the page). Example:

HTML

 <ons-screen page="{{page}}"></ons-screen>

Javascript to show a new page using default method (resetToPage):

app.controller('AppCtrl', function($scope) {
    $scope.navigate = function() {
         $scope.page = 'myPage.html'
      }  
});

Javascript to show a new page using push:

app.controller('AppCtrl', function($scope) {
    $scope.navigate = function() {
            $scope.page = {url: 'myPage.html', method: 'push'};
      }  
});

Javascript to pop/dismiss page:

app.controller('AppCtrl', function($scope) {
    $scope.navigate = function() {
           $scope.page = {method: 'pop'};
      }  
});

And so one. The object could be extended to receive, for example a "transition" property.

If all navigators can simply bind to properties, then a centralized NavigationService would take care of the full application state without knowing about and needing instances of ons.navigators .

BTW, I saw that on the onseenui-screen branch you added watchers for the page in the onsScreen, which I'm already using in the current project. Such a simple change, and it simplified so much the navigation architecture.

[kruyvanna]

Great!! Make sense!

BTW, I saw that on the onseenui-screen branch you added watchers for the page in the onsScreen, which I'm already using in the current project. Such a simple change, and it simplified so much the navigation architecture.

Currently it just reset the page stack. I prefer your example's way.

[kruyvanna]

initial implenentation 98019ea.
Please see branch feature/navigation_binding

also we need to change the page binding to bi-directional binding or page changes will not be notified if used with ons.screen.presentPage/dismissPage

        scope: {
            title: '@',
            page: '='

This also apply to navigator.

To illustrate this. I leave the screen

        scope: {
            title: '@',
            page: '@',

and change navigator to

        scope: {
            title: '@',
            page: '=',

You can test in
*demo/screen_page_binding_demo (presentPage will not work after using ons.screen.dismissPage)

• demo/navigator_page_binding_demo/ (pushPage works both using page attribute binding and ons.navigator.popPage)

[JoaoSaleiro]

Great work!
I'm already trying the navigation_binding branch, and here's a small issue: now page expects an object. So the below code won't work:

<ons-navigator
        left-button-icon="fa fa-bars"          
        right-button-icon="fa fa-lg fa-plus"
        page="page1.html">
</ons-navigator>

To make it work, it needs a change from page="page1.html" to page=" 'page1.html' ".
While I prefer it to expect an object so it can bind to a model, it breaks compatibility with previous approach.

[JoaoSaleiro]

I've refactored my existing code to use the navigation_binding branch.

It looks really amazing so far, with better separation of concerns.

So far, apart from the previous issue, I've found just one issue:

Changes to page are not applied immediately. By some reason, I need to call $scope.$apply() for it to work. I'm not sure if this is an issue, or something in my code. But my code is a pretty simple controller, with one method described below and one object

  // ons-navigator is binded to $scope.page, and $scope.pages is a list of page definitions
  $scope.openAdd = function () {
    $scope.page = $scope.pages.add;
    $scope.$apply();
  }

[JoaoSaleiro]

Btw, here's how my code looks now (simplified example). I really, really like this approach.
So far, I have the Navigation logic inside a Controller, but I'll later refactor it to one (or several) centralized Service(s), that will take care of making navigation decisions for all navigators.

b.controller('NavigatorCtrl', function ($scope, $timeout) {

  $scope.pages = {
    list: {
      url: 'list.html',
      method: 'push',
      options: {
        title: 'Page1',
        leftButtonIcon: "fa fa-bars",
        rightButtonIcon: "fa fa-lg fa-plus",
        onRightButtonClick: "openAdd()"
      }
    },
    add: {
      url: 'add.html',
      method: 'push',
      options: {
        title: 'Add',
        leftButtonIcon: "fa fa-bars",
        onLeftButtonClick: "goback()"
      }
    }
  }

  $scope.page = $scope.pages.list;

  $scope.openAdd = function () {
    $scope.page = $scope.pages.add;
    $scope.$apply();
  }

  $scope.goback = function () {

    $scope.list.method = "pop";
    $scope.page = $scope.pages.list;
    // One could simply do $scope.page = { method: 'pop'}; , but I want my $scope.page object to be as close to reality as possible

    $scope.$apply();
  }
});

The only thing I'm not 100% comfortable with, is what happens to $scope.page object after a pop (see my comment in the code). A way to workaround it, would be to change ons-navigator to expect an object with a slightly more complex format:

    $scope.page: {
      method: 'pop',
      page: {
          url: 'add.html',
          options: {
              title: 'Add',
              leftButtonIcon: "fa fa-bars",
              onLeftButtonClick: "goback()"
       }
     }

This way I could have a "pages" object with the definition for all pages, that is not dependent to the "method".

The above controller would change to:

 $scope.goback = function () {
    $scope.page = {method: "pop", $scope.pages.list}
}

[JoaoSaleiro]

Here's another issue: with this syntax, the options.onRightButtonClick should expect a reference to a function and not a String. In other words:

Instead of:

  onRightButtonClick: "openAdd()"

we should have:

  onRightButtonClick: openAdd

[JoaoSaleiro]

I have made a small change to onRightButtonClicked and onLeftButtonClicked to add support for functions (instead of strings) inside the right/left button click callback.

Here's the final function:

         onLeftButtonClicked: function () {
            console.log('left button clicked');
            var onLeftButtonClick = this.getCurrentNavigatorItem().options.onLeftButtonClick;


            if (onLeftButtonClick) {

              // These two lines are new. If we have a function, we simply call it instead of parsing it
              if (onLeftButtonClick && {}.toString.call(onLeftButtonClick) === '[object Function]') {
                onLeftButtonClick();


              } else {

                var onLeftButtonClickFn = $parse(onLeftButtonClick);
                if (onLeftButtonClick.indexOf('ons.navigator.') >= 0) {
                  onLeftButtonClickFn(scope);
                } else {
                  onLeftButtonClickFn(scope.$parent);
                }
              }
            } else {
              if (this.canPopPage()) {
                scope.ons.navigator.popPage();
              }
            }
          },

This change improves greatly the flexibility of ons-navigator. Now, instead of using:

  add: {
      url: 'page1.html',
      method: 'push',
      options: {
        onLeftButtonClick: "goback()"
      }
    }

we can now use:

  add: {
      url: 'page1.html',
      method: 'push',
      options: {
        onLeftButtonClick: goback
      }
    }

The difference, is that for the first case ons-navigator will look for goback() inside the controller that holds ons-navigator. In the second case, goback() can be defined anywhere. Thanks to this, now it's pretty simply to write a Service that takes care of all navigation, and can be injected anywhere. Other Controllers don't need to know or access the navigator.

I'll paste here a sample of my Service when it's finished.

[JoaoSaleiro]

In the changes I made above to ons-navigator, it's missing a scope.$apply() after the onLeftButtonClick().

So:

if (onLeftButtonClick && {}.toString.call(onLeftButtonClick) === '[object Function]') {
              onLeftButtonClick();
              scope.$apply()
}

[kruyvanna]

Great work!!
@JoaoSaleiro how about doing Pull Request?
I guess it's easier for you.

Anyway, either way is fine for me.
If you are in, pls PR to dev branch.

[JoaoSaleiro]

As promised, here's how I'm coding my NavigationService. It looks really great, since I can inject the service anywhere, and easily manage navigation.

NavigationService.js

app.service('NavigationService', function ($translate) {

  var $public = this;

  $public.openAdd = function () {
    previousPage = $public.page;
    $public.page = pages.add;
  }

  $public.goback = function () {
    if (previousPage) {
      previousPage.method = 'pop';
      $public.page = previousPage;
    }
  }

  this.openMenu = function () {
    // TODO: I still have to find a way to fix this, since in this service we don't have a reference to the slidingMenu. Maybe the slidingMenu should also expose a bindable property for the state of the menu
    //ons.slidingMenu.toggleMenu();
  }


  pages = {
    list: {
      url: 'transactions_list.html',
      method: 'push',
      options: {
        title: $translate('TRANSACTIONS'),
        leftButtonIcon: "fa fa-bars",
        rightButtonIcon: "fa fa-lg fa-plus",
        onRightButtonClick: $public.openAdd,
        onLeftButtonClick: $public.openMenu
      }
    },
    add: {
      url: 'transactions_add.html',
      method: 'push',
      options: {
        title: $translate('NEW_TRANSACTION'),
        onLeftButtonClick: $public.goback
      }
    },
    chooseBankAccount: {
      url: 'transactions_add_chooseBankAccount.html',
      method: 'push',
      options: {
        title: $translate('SELECT_ACCOUNT'),
        onLeftButtonClick: $public.goback
      }
    }
  }

  var previousPage = null;
  $public.page = pages.list;
});

Navigator1.html

<ons-navigator
        ng-controller="NavigatorCtrl"
        page="NavigationModel.page">

</ons-navigator>

NavigatorCtrl.js

app.controller('NavigatorCtrl', function ($scope, NavigationService) {
  $scope.NavigationService = NavigationService;
});

If at any moment I need, for example, to navigate to the add page I simply:

1- Inject the NavigationService
2- Call NavigationService.openAdd()

I can easily extend the logic of the NavigationService to evaluate stuff, intercept navigation, etc.

And so on :)

Thanks for all the work put in onseenui. I hope this approach is applied to the rest of the components, so they can all bind to properties and react to Model changes.

[JoaoSaleiro]

@kruyvanna , about the pull requests: Github is completely new to me and I have a tight deadline for the current project that needs to be closed in a couple of days. Yes, I'm going full on with the onsenui-branch in a project that will enter soon in production :o)

When this project is finished I'll dig a bit on Github and learn how to do pull requests, to simplify contributions. In the meantime hope you don't mind if I keep making suggestions using the comments in issues :)

[JoaoSaleiro]

For reference purposes, my NavigationService had an issue: for a page stack bigger than two pages, it was not going back. So here's the change I did.
This is not that important for onsenui, but in case someone wants to follow my approach, here's my code:

app.service('NavigationService', function ($translate) {

  var $public = this;

  $public.openAdd = function () {
    push(pages.add);
  }

  $public.openSelectAccount = function () {
    push(pages.selectAccount);
  }

  function push(page) {
    page.method = 'push';
    $public.page = page;
    pageStack.push(page);
  }

  $public.pop = function () {
    // Cannot pop the first page
    if (pageStack.length < 2)
      return;

    pageStack.pop();
    var prevPage = pageStack[pageStack.length - 1];
    prevPage.method = 'pop';
    $public.page = prevPage;
  }

  this.openMenu = function () {
    // TODO: I still have to find a way to fix this, since in this service we don't have a reference to the slidingMenu. Maybe the slidingMenu should also expose
    // a bindable property for toggling ???
    //ons.slidingMenu.toggleMenu();
  }


  var pages = {
    list: {
      url: 'transactions_list.html',
      method: 'push',
      options: {
        title: $translate('TRANSACTIONS'),
        leftButtonIcon: "fa fa-bars",
        rightButtonIcon: "fa fa-lg fa-plus",
        onRightButtonClick: $public.openAdd,
        onLeftButtonClick: $public.openMenu
      }
    },
    add: {
      url: 'transactions_add.html',
      method: 'push',
      options: {
        title: $translate('NEW_TRANSACTION'),
        onLeftButtonClick: $public.pop
      }
    },
    selectAccount: {
      url: 'transactions_account_select.html',
      method: 'push',
      options: {
        title: $translate('SELECT_ACCOUNT'),
        onLeftButtonClick: $public.pop
      }
    }
  }

  $public.page = pages.list;
  var pageStack = [$public.page];

});