ng-route + webix --> ERROR: non-unique view id

Webix JS
1

Hi,

I’m now using ng-route (actually ui-router) to switch between views. If I go back to a view which was already visited, webix throws an error message for each webix-view in the html to which I had assigned an id. Nonetheless, the app works fine and I just have a slew of yellow messages on my screen.

What can be done about this?

Cheers

2

How the ui was created - through HTML markup or through config object in the scope ?
Is old scope was destroyed on view change ?

By default Webix will destroy all widgets after scope destruction. In your case it seems that old widgets were not correctly destroyed.

As fast solution, you can add a line of code which will destroy top-level webix view on global view change

$$("top_view_id").destructor();
3

Thanks Maksim.

On some views the main ui is created via a config object, on others via html markup.

For info, this is the global clean-up function (in appConfig.js and the $stateChangeStart is provided by ui-route)

myApp.run([’$rootScope’,’$window’,’$document’,
function($rootScope,$window,$document){

    //Set a listener for webix clean-up
    $rootScope.$on('$stateChangeStart',
        function(event, toState, toParams, fromState, fromParams){
            var webixElements = $document.find(".webix_view");
            if (webixElements[0]) {
                console.log('INFO@wiApp.run()#on.$stateChangeStart() cleaning up webix elements: ' ,fromState,' --> ',toState);
                $$(webixElements[0]).destructor();
            }

        })
}

]);

Alternatively, you could setup a listener for a specific view by including the listener in its controller and replacing $rootScope by $scope.

4

To avoid destroying the view in case the we’re loading a nested view, we need to add, as the first line in the callback:

            // Check to see if we're loading a nested view
            if (toState.name.has(fromState.name))
                return