poteto / ember-crumbly Goto Github PK
View Code? Open in Web Editor NEWDeclarative breadcrumb navigation for Ember apps
License: MIT License
Declarative breadcrumb navigation for Ember apps
License: MIT License
This error is shown when I move from a page with ember-crumbly to a page without it.
The next page isn't loaded, so this error totally breaks the page navigation.
I don't have a loading route, but I have a loading.hbs
template.
DEBUG: -------------------------------
ember.debug.js:4888 DEBUG: Ember : 1.12.0
ember.debug.js:4888 DEBUG: Ember Data : 1.0.0-beta.18
ember.debug.js:4888 DEBUG: jQuery : 2.1.4
ember.debug.js:4888 DEBUG: Ember Simple Auth : 0.8.0
ember.debug.js:4888 DEBUG: Ember Simple Auth Devise : 0.8.0
ember.debug.js:4888 DEBUG: -------------------------------
One of the great uses for crumbly is solving the navigation headache of returning to a previous route in heavily nested routes. However, Ember provides resetNamespace
to prevent your actual code requiring heavy nesting. I'm not sure if others find this to be an issue, but when resetting the namespace, Crumbly's first route returns to the reset point.
This is problematic because it no longer reflects how our user navigated here. This could possibly be solved by #19, but I also think we could solve it much more easily by not using currentRouteName
, and perhaps using currentURL or something similar. I'm not sure if this offers the same route lookup mechanism or not. This might be a breaking change for some users.
Thoughts?
Currently the breadcrumb element still shows up and takes up space even if there are no crumbs.
Let us assume, the route is say foo > baz and another route xyz > baz
Steps to reproduce:
Please share your thoughts if it happens to others as well.
I can try for a possible fix, could take some time though.
Opt in or out to having links inside of the breadcrumb.
When I click on a breadcrumb it seems that the redirect hook in my model doesn't work.
_guessRoutePath(routeNames, name, index) {
const routes = routeNames.slice(0, index + 1);
if (routes.length === 1) {
return `${name}.index`;
} else {
return routes.join('.');
}
},
throws this error: Uncaught Error: Assertion Failed: [ember-crumbly]
route:examples.indexwas not found
when in a pod format I have the perfectly legitimate examples/route.js
examples/template.hbs
.
Let's assume we've got the following route hierarchy: /admin/users and admin route has following definition:
export default Ember.Route.extend({
breadCrumb: {
title: 'Some title'
}
});
When you enter the route 'admin', the admin breadcrumb is not linkable since it is the last element of the breadcrumb. Unfortunately, when you proceed to 'admin.users' that admin route is still not linkable. Reload of the page fixes the problem.
The issue here is that when you first enter the route you retrieve breadCrumb object from the route and modify it injecting linkable property. And this property value is used from this moment on.
The fix I guess is easy: use a copy of the object. Something along the lines in _lookupBreadCrumb:
const routeBreadCrumb = get(route, 'breadCrumb');
if (typeOf(routeBreadCrumb) === 'null') {
return;
}
let breadCrumb = Ember.assign({
title: classify(name),
linkable: crumbLinkable,
path
}, routeBreadCrumb);
return breadCrumb;
So far one could use workaround:
export default Ember.Route.extend({
breadCrumb: Ember.computed(function() {
return {
title: 'Some title'
};
}).volatile()
});
If the route is "foo.baz" and setting "baz" as "linkable:false", and having "edit" route as child of "baz" renders the breadcrumb as "foo > baz > edit" where
foo - linkable
baz - non linkable
edit - linkable.
As an FYI, the demo url link (https://github.com/poteto/ember-crumbly/blob/master/package.json#L57) is down, as divshot was bought by Firebase in the last year.
Appreciate your work on this!
if you use breadCrumb: null
on the first couple (sub)routes, you can end up with an empty crumb container.
it might be nice to autohide it in that case
edit:
having just one crumb is kind of annoying too. it might be nice to have:
crumbThreshold
firstCrumbRoute
Consider the following routes.
When navigating to http://localhost:4200/customers the breadcrumbs generated is
However when navigating to http://localhost:4200/customers/1 the breadcrumbs generated is
router.js
this.route('customers', function () {
this.route('profile', {path: '/:id'});
});
routes/customers.js
export default Ember.Route.extend({
breadCrumb: {
title: 'OverrideMe!'
},
});
I am getting errors when crumbly can't find a loading route. This is similar to #60, but the twist is these routes, although they don't exist, should not be included in the crumb ( unlike index or other routes that don't explicitly exist but are still breadcrumbable routes. )
Anyway .. I can submit PR, but wanted to wait till the master branch is updated. Is that going to happen anytime soon?
Tests are failing for #27 because the click
test helper promise is never fulfilled in the release, beta, and canary channels. After a bit of investigation, I found that transitioning to a different route in the dummy app causes an infinite re-render (and infinite deprecations).
To reproduce (on the develop
branch), run:
ember try ember-release serve
Then open 127.0.0.1:4200/foo/bar/baz
and your developer console. Once loaded, in any component, click on a crumb that will transition to another route. You should see an infinite stream of deprecations in the console, and the tab will likely become unresponsive.
If you remove the Custom Block component from the dummy app and repeat this test, all should work.
I have a use case that doesn't seem to be covered in the docs.
I have a resource that has several sub-routes (details, relatedobjects, morerelatedobjects) and I use bootstrap tabs to keep a consistent interface. This means that when I link to a particular resource, I link directly to /details
, which provides data related to the resource itself (as opposed to the other tabs, which show arrays of the related objects.)
However, when I use crumbly
it links directly to the resource without the details
, meaning that it renders an empty page. I've tried using a redirect on the 'naked' resource to transition to the details
sub-route, but either I'm using that method incorrectly or it simply isn't working.
I see how to overwrite the text in the breadcrumb but how do I overwrite the linked route itself?
Thanks...
Hi,
I found that bread-crumb addon very useful, but I think not everyone use Bootstrap or Foundation for layout. Currently it's not possible to fully customize addon's classNames, because breadcrumb
class is a default one and cannot be overwritten. It can cause some problems, as it is in my case.
Regards
I ran into a situation where the breadCrumb title was stale by the time the page was rendered. Long story short, afterModel
on the new route may wind up being called before deactivate
on the old route, but model changes are rolled back on deactivate
. As a result, the breadcrumb was showing the unsaved title that was eventually rolled back.
One method for resolving this situation is to define breadCrumb
as a computed property. The good news is that it works:
breadCrumb: Ember.computed('controller.model.name', {
get() {
return { title: this.get('controller.model.name') };
}
})
The trouble is that I did not see any documentation or tests accordingly. I'm wondering if this is a supported feature, and if not, should it be?
Classify the string
import { translationMacro as t } from "ember-i18n";
breadCrumb: {
title: t('settings.language'),
}
Error: Uncaught Error: Assertion Failed: Cannot translate settings.language. [object Object] does not have an i18n.
DivShot has ceased ops, becoming part of Firebase.
Henceforth, the demo site is no longer available, FYI.
This project has a great rating on ember observer, but has a few bugs, broken demo page, and broken CI. Also looks like the PRs are fairly active, wanted to see if you were still working on this.
If the original author has moved on, does someone from the PR thread want to step up and take over? npm still sees this package getting a fair amount of use, but without a maintainer I'll probably switch us to something else.
Enforce all the styleguides!
It would be great if there was an option to make the active breadcrumb not be an anchor tag. I'm using the breadcrumb with Bootstrap and their examples show the active breadcrumb to just have text within the list item (no anchor tag).
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Currently, I'm adding my own custom styles to make the active breadcrumb look like normal text instead of a link, but I'm still able to click on it, which just goes to the same page I'm on.
Might need to polyfill.
Crumbly doesn’t honor Ember convention: authors/Index.js
route isn’t parent of authors/posts.js
, it’s actually the default route. Loading /authors/1/posts
will not load index model, so can’t compute properties to make a “Jack > Posts” type of crumbs. User gonna see “Authors > Posts” then navigate away and back again to see “Jack > Posts” and get confused.
There’s an authors.js
route adjacent to authors directory which will load model and compute its properties but it gets ignored. Most people use index, ok, but no excuse to ignore the right file.
PS: It may be related to #99 (but with less commas)
Generate different HTML / class names for out of the box Bootstrap and Foundation support.
After upgrading to 1.0.0 this error pops up:
Uncaught Error: Could not find module `ember-new-computed` imported from `ember-crumbly/components/bread-crumbs` : loader.js:110
Already removed node_modules and cleared cache, npm installed again and everything but error still remains ... what could cause this issue?
DEBUG: Ember : 2.1.0
DEBUG: Ember Data : 2.1.0
DEBUG: jQuery : 1.11.3
DEBUG: -------------------------------
Previously, in a route I would simply use this line to set the breadCrumb to a model after the model for that route is loaded. It was a nice one-step way to get ember-crumbly to create a named link directly to that record's URL. Like this:
afterModel(model) {
Ember.set(this, 'breadCrumb', model);
}
However, as of Ember ^2.10.x this throws Assertion Failed: Cannot clone an Ember.Object that does not implement Ember.Copyable
Thoughts? I've implemented a workaround:
afterModel(model) {
Ember.set(this, 'breadCrumb', {
title: model.get("name")
});
}
But.... whain.
Thanks!
The demo site is currently down due to divshot shutting down.
I'd be happy to open a github pages PR if someone can point me in the direction of the demo app's source code?
Steps to reproduce:
{{bread-crumbs tagName="ol" outputStyle="bootstrap" linkable=true}}
in application.hbs
loading.hbs
template in app/templates/
(This is the minimum requirement for presenting a default loading template)route:loading.index
was not foundThis can be remedied by generating the required index route (ember g route loading/index
).
(It also happens with other auto-generated index routes)
Expected behaviour
Should work without explicitly generating an index route.
I have a situation when i want to show breadcrumbs when user visits
routeWithBreadcrumbsProperty/*
route and dont what to show it when user visits
routeWithBreadcrumbsProperty/index
route
and i in the first case it make sense to use routeWithBreadcrumbsProperty
route to get breadCrumb
title and in the second case it make sense to use routeWithBreadcrumbsProperty/index
route
unfortunately addon always wants to use routeWithBreadcrumbsProperty/index
property but if route level is > 0 eg. 'foo.bar' foor.bar
route is using
the workaround that i use right now is:
routeWithBreadcrumbsProperty
checks if transition target is not equal to routeWithBreadcrumbsProperty/index
and then sets correct breadcrumb to routeWithBreadcrumbsProperty/index
route also i use routeWithBreadcrumbsProperty/index
activate/deactivate hooks to populate or clear breadCrumb
object
G'day,
Would you be open to adding a linkClass
attribute to the component? Basically just like crumbClass
but for specifying a class on the <a>
element.
What do you think? I'm happy to submit a PR if you like.
This would help a lot when you need to integrate that into existing product but want to only show the breadcrumbs for specific pages and avoid the need to set breadCrumb: null
all over every route (there might be tons of routes).
Aside from that, there might be a route that is not index
(e.g., top-level about
route) and the guessed name is incorrect (there is no about.index
but there is about
). In a bigger project this all just breaks apart but with breadCrumb
route attribute being optional by default (or configured to be optional) these checks can be just silently bypassed.
I define my breadCrumb ..
export default Ember.Route.extend({
breadCrumb: {
title: 'Login',
description: 'I want to show this descrition'
}
});
How to get description
in current template?
When transitioning to the same route with another id, the crumb is not being updated.
However, when reload, the breadCrumb will be updated.
Please find the video here to illustrate the problem.
TL;DR - I have a use case where it would be nice to have a certain route provide more than one "crumb" in the breadcrumb trail.
Here's the practical use case (being verbose for clarity's sake)
Let's say I have my routes set up as follows:
app/router.js
this.route('companies', {path: '/companies'}, function () {
// companies
this.route('index', {path: '/'} );
});
this.route('company', {path: '/company/:id'}, function () {
// company/:id/departments
this.route('departments', {path: '/departments'});
});
this.route('department', {path: '/department/:id'}, function () {
// department/:id/employees
this.route('employees', {path: '/employees'});
});
this.route('employee', {path: '/employee/:id'}, function () {
// employee/:id/documents
this.route('documents', {path: '/documents'});
});
I'd argue that this is not an unconventional way to set things up. The principle that I'm sticking to here is that, with the exception of the companies.index
route, each leaf level route is a list of items under an addressable resource. That being said, conceptually, the hierarchy is clearly still
Company
Department
Employee
Document
On the page I land on for URL /employee/poteto/documents
, I would like to be able to build the breadcrumb trail like this (all potentially linkable)
Clients > Dockyard > Engineering > Lauren > Documents
Despite the active routes being
application
employee
employee.documents
a route can provide multiple 'crumbs' to the breadcrumb trail
Clients > Dockyard > Engineering > Lauren
> Documents
I'm not sure how to best add this to the API surface you already have defined (I really like it for the use cases that this add-on is designed for), but if we consider that an implementation detail, I think that decoupling model relationship hierarchies from route hierarchies would make the addon a bit more flexible.
Thoughts?
When I create a route where the first part of the route is given a null titled breadcrumb, the forward slash still appears.
Route is defined as Admin / Profiles / Profile.
Admin's breadCrumb title is set to null, and appears as:
/ Profiles / Profile
Is there a way to get it to display as: Profiles / Profile
Happens, when there is no 'route'/index route setup in the project. Dunno if the pull request I created would work with 1.0.1 ? #34
I'm using [email protected] and I get this waring all the time, when I type npm ls ember-cli-htmlbars
I get this:
├── [email protected]
└─┬ [email protected]
└── [email protected]
It will be great to use [email protected]. to fix this waring
Makes for easier debugging in consuming apps.
I read your post in ember weekly and want to use your component - but I can't get it working in my ember cli project. See terminal output. I also tried again after npm run clean:all
(see below), same issue.
node v0.12.4
ember-data v1.0.0-beta.18
"clean": "rm -rf ./node_modules ./bower_components ./dist ./tmp",
"clean:all": "npm run clean && npm cache clean && bower cache clean"
I'm refactoring my application and moved crumbly from a route to a component template. Now my component integration test fails with an error below:
Assertion Failed: [ember-crumbly] Could not find a curent route
Eventually I want to add testing and ensure proper path and links have been rendered but stuck here. I've tried many suggestions like using qunit "visit" method, StartApp helper and could not get test to pass. Any help is greatly appreciated.
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
moduleForComponent('main-user', 'Integration | Component | main user', {
integration: true,
});
test('it renders', function (assert) {
this.render(hbs`{{my-new-component-with-crumbly}}`);
assert.ok(true);
});
How can to add Home link before any breadcrumb , for example :
Home/Users ( routes/users/index)
Home/Users/new (routes/users/new)
Thanks
Thanks for publishing this addon; it looks helpful but I ran into an issue using it.
ember-cli 0.2.5
ember 1.13.0-beta.2
Uncaught Error: Assertion Failed: [ember-crumbly] `route:somewhere.index` was not found
bower.json
{
"name": "crumbly-bugfix",
"dependencies": {
"ember": "1.13.0-beta.2",
"ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
"ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
"ember-data": "1.0.0-beta.18",
"ember-load-initializers": "ember-cli/ember-load-initializers#0.1.4",
"ember-qunit": "0.3.3",
"ember-qunit-notifications": "0.0.7",
"ember-resolver": "~0.1.15",
"jquery": "^1.11.1",
"loader.js": "ember-cli/loader.js#3.2.0",
"qunit": "~1.17.1"
}
}
My app/templates/application.hbs has
<h2 id="title">Welcome to Ember.js</h2>
{{bread-crumbs tagName="ul" outputStyle="foundation" linkable=false}}
{{outlet}}
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.