Customization: Do you mean to edit the source?

[artburkart]

Regarding the 'customization' section of your Readme, do you mean for us to edit the source? Or is there a nifty way to import BreadCrumbs so I can override it? I'm using (and am new to) ember-cli if that is of any assistance.

Thanks

[artburkart]

I figured it out. I need to run ember generate initializer my-crumbs and stick this code in there:

var MyCrumbs = window.BreadCrumbs;
MyCrumbs.BreadCrumbsComponent.reopen({
  tagName: 'ol',
  classNames: 'breadcrumb',
  layout: null,
  layoutName: 'my-crumbs'
});

export function initialize(container, app) {
  app.register("component:my-crumbs", MyCrumbs.BreadCrumbsComponent);
  app.inject("component:my-crumbs", "router", "router:main");
  return app.inject("component:my-crumbs", "applicationController", "controller:application");
}

export default {
  name: 'my-crumbs',
  initialize: initialize
};

And then, of course, I need to throw a template in somewhere so BreadCrumbs can find it. This is a really awesome project!

[chrisfarber]

When you do BreadCrumbsComponent.reopen({…});, you are actually modifying the BreadCrumbsComponent class itself.

You shouldn't need to make your own copy (e.g., your my-crumbs). It should be enough to just call reopen. Can you let me know if that's not actually the case?

[artburkart]

Are you saying that I shouldn't have needed the initializer? I guess I just don't know where I'm supposed to reopen your code. The solution I came up with worked for me because it meant I wasn't hacking directly on your code in the bower_components, but you're right, it's probably not the best. I hadn't started using ember-cli until yesterday, so I'm not sure what best practices are for reopening vendor components. If I generate a component of the same name and then reoopen it from there, I get a name clash I believe, but I'll try it again later if that's what you mean for me to do.

[chrisfarber]

The approach you're using shouldn't hurt anything. I think it would be easier to have your app.js simply do:

import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import config from './config/environment';

window.BreadCrumbsComponent.reopen({
  tagName: 'ol',
  classNames: 'breadcrumb',
  layout: null,
  layoutName: 'my-crumbs'
});

var App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver: Resolver
});

loadInitializers(App, config.modulePrefix);

export default App;

[artburkart]

Alright, so I understand now. I would throw the code inside app.js. It worked. I've overwritten a chunk of your code to add app-specific functionality and it was still registering my changes, however, there seems to be no way to override the template. I followed the thread in #5 and the code suggested by rwjblue doesn't seem to solve the problem.