2

I'm reading a book "single page web application" written by "Michael S. Mikowski".

In chapter3, there is a code using jQuery library "uriAnchor".

the book doesn't provide information much about this jquery library, so I took a look at the document of uriAnchor on github.

https://github.com/mmikowski/urianchor

This "uriAnchor" has a method "configModule()" that sets up the rule for validation.

I read the instruction for this method but I couldn't understand how to set up the config object.

This is the code from the instruction page.

Validation:

As of 1.0, the ability to optionally check the validity of the Anchor against a schema has been included. Since we don't expect the allowable schema to change during run-time, we use a module configuration to set the schema, like so:

$uriAnchor.configModule({
  schema_map : {
    page    : { profile : true, pdf : true },
    _page   : {
      uname   : true,
      online  : { 'today','yesterday','earlier' }
    },
    slider  : { confirm : 'deny' },
    _slider : { text : 'goodbye' },
    color   : { red : true, green : true, blue : true }
  }
});

I believe this configModule method set up the validation rule for urls like this below.

/#!page=profile:uname,true|online:today&slider=confirm:text,goodbye&color=red

but, what are these!?

for example, 

page    : { profile : true, pdf : true },

what does these boolean mean and where and how are they used?

They don't even show up in the url.

slider  : { confirm : 'deny' },

and also, what is this!??

what is the role of the value "deny" for this method??

online  : { 'today','yesterday','earlier' }

and what is this!? the value is not even an array!!

I have no idea.

I tried changing these setting and see what kind of different it would make but I couldn't figure out.

If you are familiar with this jquery library, please answer my question!

Thank you so much!!

I found this book "single page web application" is very stressful to read...

I've been spending 2 days to understand chapter 3...

W3Q
  • 909
  • 1
  • 11
  • 19

1 Answers1

2

In his configModule example, which defines acceptable url variables and values there are two mistakes: 

// wrong
$uriAnchor.configModule({ ...
// fixed
$.uriAnchor.configModule({ ...

// wrong
online: { 'today','yesterday','earlier' }
// fixed
online: { 'today': true, 'yesterday': true, 'earlier': true }

The schema actually follows a consistent pattern: Property names in the schema with values that evaluate to true define acceptable values for their objects. Any other values cause an error.

The following defines 1 fish, 2 fish and 333 as acceptable values for online: 

online: { '1 fish': true, '2 fish': true, 333: true }

The following explicitly defines 1 fish and 2 fish as acceptable values for online, and w, x, y and z as NOT acceptable:

online: { '1 fish': true, '2 fish': 'trout',
          w: false, x: 0, y: '', z: undefined }

The value trout makes 2 fish a valid value for online because trout is a non-empty string, which javascript evaluates as true. Mikowski's examples confirm: 'deny' and text: 'goodbye' are equally valid but equally confusing. Sticking with true and false would be more clear.

Values not defined as properties in the schema are also disallowed, so technically there's no need to include them and set them to false in the schema except for development purposes or self-documentation.

Consider this schema example:

$.uriAnchor.configModule({
    schema_map : {
        page    : { profile : true, pdf : true },
        _page   : {
            uname: true,
            online: { '1 fish': true, '2 fish': true, 'red fish': false }
        },
        slider  : { confirm : true },
        _slider : { text : true, what : true },
        color   : { red : true, green : true, blue : false }
    }
});

(notice below that uname: true is not necessary)

Some example setAnchor calls, and the URIs they generate: 

//  #!page=profile:uname,steve
$.uriAnchor.setAnchor({
  page: 'profile',
  _page: {
    uname: 'steve'
  }
});

//  #!page=pdf:uname,joe|online,1%20fish&slider=confirm:text,hello&color=red
$.uriAnchor.setAnchor({
  page: 'pdf',
  _page: {
    uname: 'joe',
    online: '1 fish'
  },
  slider: 'confirm',
  _slider: {
    text: 'hello'
  },
  color: 'red'
});

//  #!page=pdf:uname,joe|online,1%20fish|nothing,zero&slider=confirm:text,hello|pretty,123&color=red
$.uriAnchor.setAnchor({
    page: 'pdf',
    _page: {
        uname: 'joe',
        online: '1 fish',
        nothing: 'zero'
    },
    slider: 'confirm',
    _slider: {
        text: 'hello',
        pretty: 123
    },
    color: 'red'
});

Notice that the dependent variables "nothing" and 'pretty" are not defined in the schema, but they work anyway. Maybe this is a bug - I have no idea, but dependent variables are accepted whether they are in the schema or not. Technically the only time you have to explicitly define a dependent variable is so you can define acceptable values for it, as in "online". Otherwise, self-documentation seems to be the only benefit.

Doug Leary
  • 199
  • 8