d4f / backbone-highway Goto Github PK
View Code? Open in Web Editor NEWRouting Backbone with style \o/
License: MIT License
Routing Backbone with style \o/
License: MIT License
Being able to execute async functionnalities while pausing the rest of the route execution in the action
and close
controllers of a route.
The controller context could be passed a method next
that would resume the process.
Could/Should this be implemented in triggers ?
Need to support routes with optional parts that do not contain any parameters, for example:
// Path for a route named 'users'
/users(/:id)(/)
This route works for all these urls when executing the url on first load:
/users
/users/
/users/42
/users/42/
But when navigating to the given route using the go
method, Highway will try to inject an inexisting parameter resulting in a corrupted path, for example:
Backbone.Highway.go('users', [42]);
// Will generate the path: /users/42undefined
Add another option to the go
function for a query
object (for defining query parameters) and pass the query object along to the route action.
It is already built into urlComposer https://github.com/RasCarlito/url-composer#usage
Example:
history.route({
name: 'my-route',
path: 'items/:id',
action(state) {
console.log(state.params, state.query);
state.resolve();
}
});
history.go({ name: 'my-route', params: { id: 1 }, query: { search: 'foo' });
// items/1?search=foo
There seems to be no unit tests for this project. Is there any intention to add unit tests? I am looking to use this route implementation for a production project but I am worried about possible regressions in the future. It would also be helpful for those looking to contribute to it (like myself).
Calling an inexisting url throws an error in url-composer
.
Seen when executing the demo script.
url-composer.js:308 Uncaught TypeError: Cannot read property 'match' of null
at getParamsMatch (url-composer.js:308)
at Object.paramsArray2Object [as params] (url-composer.js:422)
at actionWrapper (backbone-highway.js:236)
at Route.execute (backbone-highway.js:218)
at error404 (backbone-highway.js:312)
at Object.start (backbone-highway.js:335)
at Object.<anonymous> (index.js:62)
at __webpack_require__ (bootstrap 287c1d3…:657)
at fn (bootstrap 287c1d3…:85)
at Object.<anonymous> (log-apply-result.js:30)
Some functionalities are in conflict, for example, the ability to declare multiple controllers for a given path is the same as declaring aliases between routes. The aliasing structure is much more flexible tldhan the multiple controllers.
The authenticated
option should probably be declared somewhere else. The fact that the user is logged in or not should be abstracted from the route declaration itself. As it has been pointed out to me, it would be more obvious to pass this information to the route action via the action context which is not really implemented yet.
Execute tests and build on Travis CI
Add an option to the Backbone.Highway.go()
method so that it can re-execute (trigger) the route if it's the same.
For example, you redirect the user to a profile route that is defined with the name user.profile
like this
Backbone.Highway.go('user.profile');
Re-executing the method with a force
parameter should re-execute the route.
Backbone.Highway.go('user.profile', { force: true });
The bithound report shows several dependencies can/should be updated: https://www.bithound.io/github/d4f/backbone-highway
Update the dependencies and adapt whatever needs to.
Is it possible to unregister a route? It seems trivial to remove it from the Router but difficult to remove from the highway store
since there are no public methods/variables to mutate its store data.
When declaring an alias to another route via its path the primary route arguments are not passed in. For example :
Backbone.Highway.map(function () {
this.route('user', {
path: '/user/:id',
action: function (id) { /* Render user page */ }
});
this.route('user.edit', {
path: '/user/:id/edit',
before: [
{path: '/user/$1'} // $1 should be filled in with :id
],
action: function (id) { /* Render user edit page */ }
});
});
If a route is defined using splat params (e.g. /users/*
) the go
method should inject what ever is given as route arguments correctly.
// Define a route with splat param
Backbone.Highway.route('user.detail', {
path: '/users/*',
action: function () {}
});
// Execute route
Backbone.Highway.go('user.detail', ['42/detail']); // Should route to /users/42/detail
Create a contributing.md
file to explain how to contribute to the project :)
Create production versions that are minified/gzipped with a grunt process.
The site hosted on gh-pages
is the documentation for the 0.7.1 version of backbone-highway and thus is completely outdated.
Create a static site for the 2.0.0 version:
Write some unit tests using jasmin or mocha.
Create grunt task to execute them via karma.
When injecting parameters into a path, if mandatory parameters are missing throw a ReferenceError.
Passing an event dispatcher should not be mandatory. Simple route declaration by passing only a name, path and action method should be possible.
// Starting router with no arguments should work
Backbone.Highway.start();
When defining a route with the name users
and the path : /users/:id/:action-:section
Navigating to it should work like this :
// Navigate to /users/42/edit-profile
Backbone.Highway.go('users', [42, 'edit', 'profile']); // or
Backbone.Highway.go({ path: '/users/42/edit-profile' });
Being able to inject parameters into a complexe path and handling optional parameters.
var args = [42];
var url = '/users/u:id(/edit/:context)';
Backbone.Highway._parse(url, args) === '/users/u42';
Method _processControllers ln 590
Can probably replace some logic with the _sanitizeArgs method.
Backbone.Router.map(function() {
this.route("user_profile", {
"path": "/user/:id",
"action": function(userId) { /* Render a cool profile page */ }
});
this.route("user_profile_edit", {
"path": "/user/:id/edit"
"before": [
{ "path": "/user/$id" }
],
"action": function(userId) { /* Render a cool profile edit form based on the original profile page */ }
});
});
For now, the complete router instance is passed to each action method when it is called.
Create a special context object that will be passed where different data will be found :
Anything else ?
When injecting parameters into the a url, e.g. /users/:id/:action
, the contents of each parameter should be encoded using encodeURIComponent
. This will permit specific characters to be converted, for example, converting spaces to %20
.
Refactor the whole asynchronous route action control flow using async/await
syntax and make the go
method return a Promise
.
state.resolve()
and state.reject()
methods.
This refactor should be released as the v3.
import highway from 'backbone-highway'
highway.route({
name: 'profile',
path: '/users/:name',
action: async (state) => {
console.log(`Hello ${state.params.name}`)
// Get some user data
const data = await fetch(`/api/users/${state.params.name}`)
return data.id // 42
}
})
const userId = await highway.go({ name: 'profile', params: { name: 'rascarlito' })
console.log('User id #', userId) // User id #42
I don't think actually getting data from calling the router should actually be very useful, but listening to when the route action has actually finished executing is.
For a given route declaration
highway.route({
name: 'profile',
path: '/user/:id'
})
Navigating to the route by passing the parameters as an object should work
highway.go({ name: 'profile', params: { id: 42 } })
But instead, it only works when using an array
highway.go({ name: 'profile', params: [42] })
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.