Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

can-route

Package Overview
Dependencies
Maintainers
11
Versions
118
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

can-route - npm Package Compare versions

Comparing version 4.1.0 to 4.1.1

182

doc/can-route.md

@@ -19,22 +19,19 @@ @module {Object} can-route can-route

```js
{
data, // The bound observable.
register, // Register routes that translate between
// the url and the bound observable.
start // Begin updating the bound observable with
// url data and vice versa.
{
data, // The bound observable.
register, // Register routes that translate between
// the url and the bound observable.
start, // Begin updating the bound observable with
// url data and vice versa.
deparam, // Given url fragment, return the data for it.
rule, // Given url fragment, return the routing rule
param, // Given data, return a url fragment.
url, // Given data, return a url for it.
link, // Given data, return an <a> tag for it.
isCurrent, // Given data, return true if the current url matches
// the data.
currentRule // Return the matched rule name.
}
```
deparam, // Given url fragment, return the data for it.
rule, // Given url fragment, return the routing rule
param, // Given data, return a url fragment.
url, // Given data, return a url for it.
link // Given data, return an <a> tag for it.
isCurrent, // Given data, return true if the current url matches
// the data.
currentRule // Return the matched rule name.
}
```
@body

@@ -89,29 +86,27 @@

import "can-stache-route-helpers";
Component.extend({
tag: "my-app",
autoMount: true,
ViewModel: DefineMap.extend({
page: "string"
}),
view: stache(`
{{#switch(page)}}
{{#case("home")}}
<h1>Home Page</h1>
<a href="{{#routeUrl(page='products')}}">Products</a>
{{/case}}
{{#case("products")}}
<h1>Products</h1>
<a href="{{#routeUrl(page='home')}}">Home</a>
{{/case}}
{{#default()}}
<h1>Page Not Found</h1>
<a href="{{#routeUrl(page='home')}}">Home</a>
{{/default}}
{{/switch}}
`)
});
route.data = document.querySelector("my-app");
route.register("{page}");
Component.extend( {
tag: "my-app",
autoMount: true,
ViewModel: DefineMap.extend( {
page: "string"
} ),
view: stache( `
{{#switch(page)}}
{{#case("home")}}
<h1>Home Page</h1>
<a href="{{#routeUrl(page='products')}}">Products</a>
{{/case}}
{{#case("products")}}
<h1>Products</h1>
<a href="{{#routeUrl(page='home')}}">Home</a>
{{/case}}
{{#default()}}
<h1>Page Not Found</h1>
<a href="{{#routeUrl(page='home')}}">Home</a>
{{/default}}
{{/switch}}
` )
} );
route.data = document.querySelector( "my-app" );
route.register( "{page}" );
route.start();

@@ -127,12 +122,10 @@ ```

```js
var DefineMap = require("can-define/map/map");
var route = require("can-route");
var AppViewModel = DefineMap.extend({
page: "string"
});
var appState = new AppViewModel();
import DefineMap from "can-define/map/map";
import route from "can-route";
const AppViewModel = DefineMap.extend( {
page: "string"
} );
const appState = new AppViewModel();
route.data = appState;
route.register('{page}', {page: 'home'});
route.register( "{page}", { page: "home" } );
route.start();

@@ -151,7 +144,7 @@ ```

```js
var AppViewModel = DefineMap.extend({
page: "string"
});
const AppViewModel = DefineMap.extend( {
page: "string"
} );
route.data = new AppViewModel();
route.register("{page}");
route.register( "{page}" );
route.start();

@@ -163,5 +156,6 @@ ```

```js
route.data.on('page', function(ev, newVal, oldVal) {
// page changed from "recipes" to "settings"
});
route.data.on( "page", function( ev, newVal, oldVal ) {
// page changed from "recipes" to "settings"
} );
```

@@ -174,3 +168,3 @@

```js
route.data.page = 'images';
route.data.page = "images";
```

@@ -181,3 +175,3 @@

```js
route.data.update({page: 'tasks', id: 5});
route.data.update( { page: "tasks", id: 5 } );
```

@@ -196,5 +190,6 @@

```js
route.data.type = 'image/bar';
route.data.type = "image/bar";
// OR
route.attr('type', 'image/bar');
route.attr( "type", "image/bar" );
```

@@ -219,3 +214,3 @@

```js
route.register("#!content/{type}");
route.register( "#!content/{type}" );
```

@@ -229,2 +224,3 @@

location.hash = "#!type=videos";
// route -> {type : "videos"}

@@ -238,6 +234,8 @@ ```

```js
route.register("#!content/{type}");
route.register( "#!content/{type}" );
location.hash = "#!content/images";
// route -> {type : "images"}
route.data.type = "songs";
// location.hash -> "#!content/songs"

@@ -249,4 +247,5 @@ ```

```js
route.register("content/{type}",{type: "videos" });
location.hash = "#!content/"
route.register( "content/{type}", { type: "videos" } );
location.hash = "#!content/";
// route -> {type : "videos"}

@@ -259,4 +258,5 @@ // location.hash -> "#!content/"

```js
route.register("", { page: "index" });
route.register( "", { page: "index" } );
location.hash = "#!";
// route -> {page : "index"}

@@ -282,3 +282,3 @@ // location.hash -> "#!"

```js
route.data.type = 'videos';
route.data.type = "videos";
```

@@ -294,3 +294,3 @@

```js
route.link("Videos", {type: 'videos'});
route.link( "Videos", { type: "videos" } );
```

@@ -310,8 +310,6 @@

```js
route.register('{page}/{section}');
route.register( "{page}/{section}" );
route.start();
route.data.page = 'contact';
route.data.section = 'email';
route.data.page = "contact";
route.data.section = "email";
route.currentRule(); // "{page}/{section}"

@@ -323,8 +321,6 @@ ```

```js
route.register('{page}', { section: 'email' });
route.register( "{page}", { section: "email" } );
route.start();
route.data.page = 'contact';
route.data.section = 'email';
route.data.page = "contact";
route.data.section = "email";
route.currentRule(); // "{page}"

@@ -338,9 +334,7 @@ ```

```js
route.register('{page}');
route.register('{page}/{section}');
route.register( "{page}" );
route.register( "{page}/{section}" );
route.start();
route.data.page = 'two';
route.data.section = 'a';
route.data.page = "two";
route.data.section = "a";
route.currentRule(); // "{page}/{section}"

@@ -354,10 +348,8 @@ ```

```js
route.register('', { page: 'home' });
route.register('{section}');
route.register( "", { page: "home" } );
route.register( "{section}" );
route.start();
route.data.page = 'home';
route.data.section = 'a';
route.data.page = "home";
route.data.section = "a";
route.currentRule(); // ""
```

7

doc/currentRule.md

@@ -15,10 +15,7 @@ @function can-route.currentRule currentRule

```js
route("{type}", { type: "foo" });
route("{type}/{subtype}");
route( "{type}", { type: "foo" } );
route( "{type}/{subtype}" );
route.currentRule(); // "{type}"
route.data.subtype = "foo";
route.currentRule(); // "{type}/{subtype}"
```

109

doc/data.md

@@ -13,5 +13,4 @@ @property {Object|HTMLElement} can-route.data data

import route from "can-route";
route.data = new DefineMap({page: ""});
route.register("{page}");
route.data = new DefineMap( { page: "" } );
route.register( "{page}" );
route.start();

@@ -28,12 +27,10 @@ ```

import route from "can-route";
Component.extend({
Component.extend( {
tag: "my-app",
autoMount: true,
ViewModel: ...,
view: ...
})
route.data = document.querySelector("my-app");
route.register("{page}");
ViewModel: { /* ... */ },
view: { /* ... */ }
} );
route.data = document.querySelector( "my-app" );
route.register( "{page}" );
route.start();

@@ -55,12 +52,10 @@ ```

```js
var ViewModel = DefineMap.extend({
const ViewModel = DefineMap.extend( {
petType: "string",
storeId: "number"
});
var viewModel = new ViewModel({
} );
const viewModel = new ViewModel( {
petType: "string",
storeId: "number"
});
} );
route.data = viewModel;

@@ -72,14 +67,13 @@ ```

```js
var ViewModel = DefineMap.extend({
page: {
type: "string",
set: function(page){
if(page === "user") {
this.verifyLoggedIn();
}
return page;
}
}
});
const ViewModel = DefineMap.extend( {
page: {
type: "string",
set: function( page ) {
if ( page === "user" ) {
this.verifyLoggedIn();
}
return page;
}
}
} );
route.data = ViewModel;

@@ -105,17 +99,17 @@ ```

```js
var Location = DefineMap.extend({
const Location = DefineMap.extend( {
selected: "boolean",
id: "any"
});
var LocationList = DefineList.extend({
} );
const LocationList = DefineList.extend( {
"*": Location
});
var AppViewModel = DefineMap.extend({
} );
const AppViewModel = DefineMap.extend( {
locations: {
type: "any",
// don't serialize this property at all in the route
serialize: false
},
// virtual property that contains a comma separated list of ids

@@ -126,23 +120,24 @@ // based on locations that are selected

// comma separated list of ids
serialize: function(){
var selected = thislocations.filter(
function(location){
serialize: function() {
const selected = thislocations.filter(
function( location ) {
return location.selected;
});
var ids = [];
selected.each(function(item){
ids.push(item.id);
})
return selected.join(',');
} );
const ids = [];
selected.each( function( item ) {
ids.push( item.id );
} );
return selected.join( "," );
},
// toggle selected from a comma separated list of ids
set: function(val){
var arr = val;
if(typeof val === "string"){
arr = val.split(',')
set: function( val ) {
let arr = val;
if ( typeof val === "string" ) {
arr = val.split( "," );
}
// for each id, toggle any matched location
this.locations.forEach(function(location){
if(arr.indexOf(location.id) !== -1){
this.locations.forEach( function( location ) {
if ( arr.indexOf( location.id ) !== -1 ) {
location.selected = true;

@@ -152,17 +147,17 @@ } else {

}
})
} );
}
}
});
} );
// initialize and set route.data first, so anything binding to can-route
// will work correctly
var viewModel = new AppViewModel();
const viewModel = new AppViewModel();
route.data = appViewModel;
// GET /locations
var locations = new Location.List({});
const locations = new Location.List( {} );
// when the data is ready, set the locations property
locations.done(function(){
locations.done( function() {
viewModel.locations = locations;

@@ -172,3 +167,3 @@

route.start();
});
} );
```

@@ -175,0 +170,0 @@

6

doc/register.md

@@ -14,3 +14,3 @@ @function can-route.register register

```js
route.register("{page}", { page: "home" });
route.register( "{page}", { page: "home" } );
```

@@ -21,4 +21,4 @@

```js
route.register("{foo}")
route.register("foo/{bar}")
route.register( "{foo}" );
route.register( "foo/{bar}" );
```

@@ -25,0 +25,0 @@

7

doc/rule.md

@@ -9,6 +9,5 @@ @function can-route.rule rule

```js
route.register("recipes/{recipeId}");
route.register("tasks/{taskId}");
route.rule("recipes/5") //-> "recipes/{recipeId}"
route.register( "recipes/{recipeId}" );
route.register( "tasks/{taskId}" );
route.rule( "recipes/5" ); //-> "recipes/{recipeId}"
```

@@ -15,0 +14,0 @@

7

doc/start.md

@@ -13,4 +13,3 @@ @function can-route.start start

```js
route.register("{page}", { page: "home" }));
route.register( "{page}", { page: "home" } );
route.start();

@@ -29,5 +28,5 @@ route.data.page; // -> "home"

```js
route.register("overview/{dateStart}-{dateEnd}");
route.register("{type}/{id}");
route.register( "overview/{dateStart}-{dateEnd}" );
route.register( "{type}/{id}" );
route.start();
```

4

doc/stop.md

@@ -12,8 +12,6 @@ @function can-route.stop stop

```js
route.register("{page}", { page: "home" }));
route.register( "{page}", { page: "home" } );
route.start();
route.data.page = "home";
route.stop();
route.data.page = "cart"; // hash is still #home

@@ -20,0 +18,0 @@ ```

2

package.json
{
"name": "can-route",
"version": "4.1.0",
"version": "4.1.1",
"description": "Observable front-end application routing for CanJS.",

@@ -5,0 +5,0 @@ "homepage": "https://canjs.com/doc/can-route.html",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc