CSS in components

[jlpv....@gmail.com]

Hi.

In this link

   http://knockoutjs.com/documentation/component-overview.html

there is a new feature, Components.  You can merge ViewModel with a View (template).  This is great, but I think it could be better if there is a new section 'CSS', with default css for this component.

Something like this:

ko.components.register('component-name', {

    },

    template:

    ,

    default_css:

});

What do you think about?

Jose Luis

[valer...@gmail.com]

  I think it's not the option of component to handle template dependencies. Knockout components architecture is built with DRY in mind, there is no need to keep template engine implementation as part of component.

 The main idea, is to have something like that behind the scenes of template resolver

// Configure routing options before defining

ko.router.configure({ hashPrefix: '#/', debug: true, notify: notify, pushState: true }); // Configure module loader ko.bindingHandlers.module.baseDir = 'js'; // Define the routes before ko.applyBindings() ko.router.map([ { route: '', name: 'home', template: 'home', title: 'Welcome', nav: true }, { route: 'who-we-are', name: 'about', title: 'About Us', nav: true }, { route: 'contact-us', name: 'contact', title: 'Contact Us', nav: true }, { route: 'content/news/:articleId', module: 'news' } //{ route: 'blog(/:slug)', name: 'blog', title: 'Crazy Blog' }, //{ route: '*notfound', name: 'notfound', callback: notFoundHandler } ]).mapNotFound({ callback: notFoundHandler }); // can specify a module/template/callback/title // Bind the view model ko.applyBindings(vm); // Should call ko.router.init() after ko.applyBindings() when using // the route bindingHandler. otherwise could safely call ko.router.init() // once the routes have been defined. ko.router.init(); //calls ko.history.start() behind the scenes

  This code is a part of https://github.com/alexbihary/knockout-router/blob/master/examples/js/app.js repository.

The router code can be merged with external templating engine from https://github.com/ifandelse/Knockout.js-External-Template-Engine/blob/master/src/TemplateEngine.js

var KoExternalTemplateEngine = function(koEngineType) { var engine = koEngineType ? new koEngineType() : new ko.nativeTemplateEngine(); engine.templates = {}; engine.makeTemplateSource = function(template, bindingContext, options) { // Named template if (typeof template == "string") { var elem = document.getElementById(template); if (elem) return new ko.templateSources.domElement(elem); else { if(!engine.templates[template]) { engine.templates[template] = new ExternalTemplateSource(template, options); } return engine.templates[template]; } } else if ((template.nodeType == 1) || (template.nodeType == 8)) { // Anonymous template return new ko.templateSources.anonymousTemplate(template); } }; engine.renderTemplate = function (template, bindingContext, options) { var templateSource = engine.makeTemplateSource(template, bindingContext, options); return engine.renderTemplateSource(templateSource, bindingContext, options); }; return engine; }; ko.KoExternalTemplateEngine = KoExternalTemplateEngine; if (jQuery.tmpl && jQuery.tmpl.tag.tmpl.open.toString().indexOf('__') >= 0) { ko.setTemplateEngine(new KoExternalTemplateEngine(ko.jqueryTmplTemplateEngine)); } else { ko.setTemplateEngine(new KoExternalTemplateEngine()); }

   My opinion, that the ExternalTemplateSource implementation is much better suited to handle css dependencies of external templates, on top of router. Only knockout.js can give us such freedom, keeping core implementation clean.

[jlpv....@gmail.com]

Hi.

Thanks for the answer.

I was not thinking in custom bindings.  I was thinking only in components, having a template with html and a little default css to show it.

Perhaps I'm wrong in the way I use components.

:-)

Jose Luis

...