Templating/Bindings for stylesheet content

[Stefano Bagnara]

Maybe I'm asking for something "weird" or totally off track, but I ask anyway.

I currently do something like this using knockout:

<style type="text/css" data-bind="template: { name: 'main-css' }"></style>
<script type="text/html" id="main-css">
  body { background-color: <!-- ko text: bgColor -->#808080<!-- /ko -->; }
</script>

What I'd like to do is something similar:

<style>
  body { background-color: /* ko text: bgColor */#808080/* /ko */; }
</style>

Is this crazy?

I'm not sure this is feasible at all, but I guess I should write an alternative template language that parses the CSS comments written like that one (not small, but an easy task) and then add some "magic" to tell ko to apply to the style element using that templating language. Of course I'm ready to make my hands dirty, but I'd like to receive some hints/opinions before I start digging into ko source code.

I know that a similar thing would never be optimized and would be overkill for big CSS, but I only need it for small segments and I can live with a full style rewrite for every model change (at least if I can limit the rewrites to the used variable changes).

Stefano

PS: I found knockout is really easy, elegant and powerfull! Thank you for this!

[Casey Corcoran]

http://knockoutjs.com/documentation/style-binding.html

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Stefano Bagnara]

Well, this does not solve my issue: I need to change a stylesheet rule and not the style attribute and I cannot apply the style inline in each element.

Maybe I should have used a different example: just reread my message but replace "body" with ".myclass" so that the background is applied to every .myclass object.

Stefano

[Kevin Yeh]

I want to do something similar.  (Modify the appearance of existing elements of a given glass based on an observable)
I wonder if something like would work.
<script>
var css-data={class:"myclass",class.bgcolor:"808080"};

 function generate-css(data)
 {
     return data.class + "{ background-color:  "+ data.bgcolor + "; }"
 }
</script>
<style data-bind="{text: generate-css($data)}"/></style>

[Stefano Bagnara]

Kevin, I already do something similar, as the first code I posted in this thread is already working with knockout.
What I don't like is that I have to use an HTML template to write a stylesheet and that the default style is not visible if I don't run knockout.

I simply would like to fix these 2 things and I was looking at developer hints about where to put my hands in the KO internals, but I already have the "broad" functionality working.

Stefano

[chrisjc...@gmail.com]

Have you tried using LESS client-side?

http://lesscss.org/#usage

wouldn't be using KO bindings for it, but it will give you a great deal of control over style variables....(assuming you use it client side)

[Stefano Bagnara]

Yes, this is an option I'm evaluating.
My goal is to have an html+css template that is visibile from any HTML+CSS browser and then add "configurability" to it by using javascript.
I don't think Less can help with this: e.g: if I don't run javascript the style is not applied. Instead I would like to have a system where I can declare the style in standard stylesheet and then have some declaration to override it via forms (bound with KO, like I already do with html content/attributes).

As I wrote in the first post, my requirement is to write something like this in the HTML:

<style>
  selector { property: /* ko text: variable */defaultValue/* /ko */; }
  selector2 { property2: /* ko text: variable2 */defaultValue2/* /ko */; }
  /* ko if: variable3 */
  selector3  { property3: value3; }
  /* /ko */
</style>

I can use a different syntax for comments, but I have to implement something similar.
One of my option is to read the style content, replace /* with <!-- and */ with -->, translate it into a KO template and then get the output of the template and replace back <!-- with /* and --> with */. but i fear this would kill the browser for performances (but maybe i'll try)