Problem with $.route, behavior is not as expected?

jQueryMX Controller

Arjun Bal..

Problem with $.route, behavior is not as expected?

in jQueryMX » Controller • 1 year ago

$.Controller("MYAPP.Router",

/* @Static */
{},

/* @Prototype */
{
"init": function(){

$.route.ready(false);

// eg solutions or projects
$.route(":resource", { "resource": "" });

// eg solutions/100 or projects/200
$.route(":resource/:id", { "resource": "", "id": "" });

// eg solutions/100/projects or projects/200/libraries
$.route(":resource/:id/:sidebar_item", { "resource": "", "id": "", "sidebar_item": "" });

// eg solutions/100/projects/add or projects/200/libraries/add
$.route(":resource/:id/:sidebar_item/:action", { "resource": "", "id": "", "sidebar_item": "" , "action": "" });
},

"{$.route} resource add":function(route, event, newValue, oldValue){
// this is getting called for all above examples which is expected behavior,
// but I dont want to use this as I need to write if() conditions to render the corresponding page
},
"{$.route} resource=solutions add": function(route, event, newValue, oldValue){
// this is NOT getting called when location.hash is solutions
},
"{$.route} resource=solutions set": function(route, event, newValue, oldValue){
// this is NOT getting called when location.hash is solutions
},
"{$.route} resource=solutions, id remove": function(route, event, newValue, oldValue){
// this is NOT getting called when location.hash is changed from solutions/1 to solutions
},
"{$.route} resource=solutions, id add": function(route, event, newValue, oldValue){
// this is NOT getting called when location.hash is

      // - changed from solutions to solutions/2
      // - changed from solutions to solutions/2/projects
      // - changed from solutions to solutions/2/projects/add

// - changed from solutions/1 to solutions/2

},
"{$.route} resource=solutions, id set": function(route, event, newValue, oldValue){
    // this is NOT getting called when location.hash is
  // - changed from solutions to solutions/2
  // - changed from solutions to solutions/2/projects
  // - changed from solutions to solutions/2/projects/add
  // - changed from solutions/1 to solutions/2
},

"{$.route} resource=solutions, id=* sidebar_item set": function(route, event, newValue, oldValue){
  // is this SUPPORTED - sidebar_item is set with resource=solutions and id=(some value 1 or 2 or 3)
  // I can get id using $.data.attr("id");
},
"{$.route} resource=solutions, id=* sidebar_item=* action set": function(route, event, newValue, oldValue){
  // is this SUPPORTED - action is set with resource=solutions, id=(some value 1 or 2 or 3), sidebar_item=(some value)

// I can get id using $.data.attr("id") and sidebar_item using $.data.attr("sidebar_item");

}

});

// attached to body

$("body").myapp_router();

$.route.ready(true); is invoked in controller MYAPP.Login "success" method.

Replies(7)

Justin Me..

Re: Problem with $.route, behavior is not as expected?

1 year ago

Can you write a test of this?

The problem is either with $.route or with $.Observe.

To check if it's route, you can make a test like:

https://github.com/jupiterjs/jquerymx/blob/master/dom/route/route_test.js#L6

Which works by clearing the routes, adding new routes, and calling deparam on a fragment and checking if deparam returns an object that looks right.

If the objects are always right, then it might be a problem with Observe.

Some parts of your understanding on Observe are not right. For example:

"{$.route} resource=solutions add": function(route, event, newValue, oldValue){
// this is NOT getting called when location.hash is solutions
},

I believe that "set" is the only event that works with =. And it makes sense. Add is called only when an new property is added to the object. You have a resource property (it's value is "" by default). You are just setting the property to solutions.

Arjun Bal..

Re: Problem with $.route, behavior is not as expected?

1 year ago

Thanks for the reply

Below are the testcases, COPY these to route_test.js and run. I can submit a pull request to github if you want me to

========================================================================================

test("complex-deparm", function(){

$.route.routes = {};

// --

$.route(":page", { "page": "" });

$.route(":page/:id", { "page": "", "id": "" });

$.route(":page/:id/:sidebar_item", { "page": "", "id": "", "sidebar_item": "" });

$.route(":page/:id/:sidebar_item/:action", { "page": "", "id": "", "sidebar_item": "", "action": "" });

obj = $.route.deparam("solutions");

same( obj, {page: "solutions"} );

obj = $.route.deparam("projects");

same( obj, {page: "projects"} );

// --

obj = $.route.deparam("solutions/100");

same( obj, {page: "solutions", id: "100"} );

obj = $.route.deparam("projects/200");

same( obj, {page: "projects", id: "200"} );

// --

obj = $.route.deparam("solutions/100/projects");

same( obj, {page: "solutions", id: "100", sidebar_item: "projects"} );

obj = $.route.deparam("projects/200/libraries");

same( obj, {page: "projects", id: "200", sidebar_item: "libraries"} );

// --

obj = $.route.deparam("solutions/100/projects/add");

same( obj, {page: "solutions", id: "100", sidebar_item: "projects", action: "add"} );

obj = $.route.deparam("projects/200/libraries/add");

same( obj, {page: "projects", id: "200", sidebar_item: "libraries", action: "add"} );

});

// -------------------------------

test("complex-$.route.data", function(){

var reset = function(){

window.location.hash = "";

$.route.routes = {};

$.route.attrs({}, true);

};

reset();

// --

$.route(":page", { "page": "" });

$.route(":page/:id", { "page": "", "id": "" });

$.route(":page/:id/:sidebar_item", { "page": "", "id": "", "sidebar_item": "" });

$.route(":page/:id/:sidebar_item/:action", { "page": "", "id": "", "sidebar_item": "", "action": "" });

var solutions = function(){

window.location.hash = "#!solutions";

$.route.ready(true);

obj = $.route.data.serialize();

same( obj, {page: "solutions"} );

};

var projects = function(){

window.location.hash = "projects";

$.route.ready(true);

obj = $.route.data.serialize();

same( obj, {page: "projects"} );

};

// --

var solutions_100 = function(){

window.location.hash = "#!solutions/100";

$.route.ready(true);

obj = $.route.data.serialize();

same( obj, {page: "solutions", id: "100"});

};

var projects_200 = function(){

window.location.hash = "#!projects/200";

$.route.ready(true);

obj = $.route.data.serialize();

same( obj, {page: "projects", id: "200"} );

};

// --

var solutions_100_projects = function(){

window.location.hash = "#!solutions/100/projects";

$.route.ready(true);

obj = $.route.data.serialize();

same( obj, {page: "solutions", id: "100", sidebar_item: "projects"} );

};

var projects_200_libraries = function(){

window.location.hash = "#!projects/200/libraries";

$.route.ready(true);

obj = $.route.data.serialize();

same( obj, {page: "projects", id: "200", sidebar_item: "libraries"} );

};

// --

var solutions_100_projects_add = function(){

window.location.hash = "#!solutions/100/projects/add";

$.route.ready(true);

obj = $.route.data.serialize();

same( obj, {page: "solutions", id: "100", sidebar_item: "projects", action: "add"} );

};

var projects_200_libraries_add = function(){

window.location.hash = "#!projects/200/libraries/add";

$.route.ready(true);

obj = $.route.data.serialize();

same( obj, {page: "projects", id: "200", sidebar_item: "libraries", action: "add"} );

};

solutions();

projects();

solutions_100();

projects();

solutions_100_projects_add();

solutions();

projects_200_libraries_add();

projects_200();

solutions_100_projects();

projects_200_libraries();

projects_200();

solutions_100();

solutions_100_projects_add();

solutions();

projects_200_libraries_add();

projects();

solutions_100_projects_add();

projects();

reset();

});

// -------------------------------

test("complex-$.route.delegate", 11, function(){

var reset = function(){

window.location.hash = "";

$.route.routes = {};

$.route.attrs({}, true);

};

reset();

// --

$.route(":page", { "page": ""});

$.route(":page/:id", { "page": "", "id": "" });

$.route(":page/:id/:sidebar_item", { "page": "", "id": "", "sidebar_item": "" });

$.route(":page/:id/:sidebar_item/:action", { "page": "", "id": "", "sidebar_item": "", "action": "" });

var pageSet = function(){

$.route.delegate("page", "set", function( event, newValue, oldValue){

equal( event.attr, "page" );

equal( newValue, "solutions" );

same($.route.data.serialize(), {page: "solutions"} );

});

window.location.hash = "#!solutions";

$.route.ready(true);

$.route.undelegate();

};

var pageEmpty = function(){

$.route.delegate("page", "set", function( event, newValue, oldValue){

equal( event.attr, "page" );

same($.route.data.serialize(), {page: ""} );

});

window.location.hash = "#!";

$.route.ready(true);

$.route.undelegate();

};

var idSet = function(){

$.route.delegate("id", "set", function( event, newValue, oldValue){

equal( event.attr, "id" );

equal( newValue, "100" );

same($.route.data.serialize(), {page: "solutions", id: "100"} );

});

window.location.hash = "#!solutions/100";

$.route.ready(true);

$.route.undelegate();

};

var idRemove = function(){

$.route.delegate("id", "remove", function( event, newValue, oldValue){

equal( event.attr, "id" );

same($.route.data.serialize(), {page: "solutions"} );

});

window.location.hash = "#!solutions";

$.route.ready(true);

$.route.undelegate();

};

// this is failing

// parts separated with space as per documentation

var pageSetidSetPartsSeparatedWithSpace = function(){

$.route.delegate("page=solutions id", "set", function( event, newValue, oldValue){

equal( event.attr, "id" );

equal( newValue, "100" );

same($.route.data.serialize(), {page: "solutions", id: "100"} );

});

window.location.hash = "#!solutions/100";

$.route.ready(true);

$.route.undelegate();

};

pageSet();

idSet();

idRemove();

pageSetidSetPartsSeparatedWithSpace(); // this is failing

// pageEmpty(); // when uncomemented change expected assetions to 13

reset();

});

========================================================================================

Multiple properties are separated by ,(comma) in controller and space in delegate method ... right?

controller "{$.route} resource=solutions, id set"

delegate $.route.delegate("resource=solutions id", "set", function( event, newValue, oldValue){

I think the problem is with Observer

deparam - working fine

$.route.data update - working fine

delegate - NOT working as expected

Arjun Bal..

Re: Problem with $.route, behavior is not as expected?

1 year ago

Justin

Do you also want me to write controller testcases?

Arjun Bal..

Re: Problem with $.route, behavior is not as expected?

1 year ago

Justin

Can you please give me some pointer?

Thanks in advance ...

Arjun Bal..

Re: Problem with $.route, behavior is not as expected?

1 year ago

Justin

Can you please help me in fixing this...

Please see above for test cases

Thanks in advance ...

Arjun Bal..

Re: Problem with $.route, behavior is not as expected?

1 year ago

Is any one having the same problem?

Arjun Bal..

Re: Justin - Added test cases - Problem with $.route, behavior is not as expected?

1 year ago

Need help

Top Reply

Response title

Attachments

New to this Portal?

Problem with $.route, behavior is not as expected?

Replies(7)

Re: Problem with $.route, behavior is not as expected?

Re: Problem with $.route, behavior is not as expected?

Re: Problem with $.route, behavior is not as expected?

Re: Problem with $.route, behavior is not as expected?

Re: Problem with $.route, behavior is not as expected?

Re: Problem with $.route, behavior is not as expected?

Re: Justin - Added test cases - Problem with $.route, behavior is not as expected?

Statistics

Tags

Actions

Related Posts