New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rendering style tag with stache template #2035

Closed
whitecolor opened this Issue Oct 28, 2015 · 8 comments

Comments

Projects
None yet
4 participants
@whitecolor
Contributor

whitecolor commented Oct 28, 2015

style tag internal content seem to be blocked from rendering stache template.

var map = new can.Map({color: 'green'})
$('head').append(can.stache('<style>body: {{color}}</style>')(map))

the result in HTML: <style>body: {{color}}</style>'

This works:

var map = new can.Map({color: 'green'})
$('head').append(can.stache('<xxx>body: {{color}}</xxx>')(map))

the result in HTML: <xxx>body: green</xxx>' - and it is dynamic (bound to map.color changes)

@marshallswain

This comment has been minimized.

Show comment
Hide comment
@marshallswain

marshallswain Oct 28, 2015

Member

I've noticed this before. I used a helper with triple curly braces {{{layoutStyles}}} to generate a dynamic style.

Member

marshallswain commented Oct 28, 2015

I've noticed this before. I used a helper with triple curly braces {{{layoutStyles}}} to generate a dynamic style.

@whitecolor

This comment has been minimized.

Show comment
Hide comment
@whitecolor

whitecolor Oct 29, 2015

Contributor

@marshallswain well that works

var map = new can.Map({color: 'green'})
$('head').append(can.stache('{{{colorHelper}}}')(
  map, {colorHelper: function(){return '<style>body{color: ' + map.attr('color') +'}</style>'}})
)

but it is not very convinient

Contributor

whitecolor commented Oct 29, 2015

@marshallswain well that works

var map = new can.Map({color: 'green'})
$('head').append(can.stache('{{{colorHelper}}}')(
  map, {colorHelper: function(){return '<style>body{color: ' + map.attr('color') +'}</style>'}})
)

but it is not very convinient

@justinbmeyer

This comment has been minimized.

Show comment
Hide comment
@justinbmeyer

justinbmeyer Oct 29, 2015

Contributor

Style needs to be special cased similar to how textareas are special cased.

Sent from my iPhone

On Oct 29, 2015, at 3:29 AM, Alex notifications@github.com wrote:

@marshallswain well that works

var map = new can.Map({color: 'green'})
$('body').append(can.stache('{{{colorHelper}}}')(map, {colorHelper: function(){return '<style>body{color: ' + map.attr('color') +'}</style>'}}))
but it is not very convinient


Reply to this email directly or view it on GitHub.

Contributor

justinbmeyer commented Oct 29, 2015

Style needs to be special cased similar to how textareas are special cased.

Sent from my iPhone

On Oct 29, 2015, at 3:29 AM, Alex notifications@github.com wrote:

@marshallswain well that works

var map = new can.Map({color: 'green'})
$('body').append(can.stache('{{{colorHelper}}}')(map, {colorHelper: function(){return '<style>body{color: ' + map.attr('color') +'}</style>'}}))
but it is not very convinient


Reply to this email directly or view it on GitHub.

@whitecolor

This comment has been minimized.

Show comment
Hide comment
@whitecolor

whitecolor Oct 29, 2015

Contributor

@justinbmeyer @marshallswain

What do you think about making styleshits dynamic using stache templtes? it could allow intresting technics of styling components with dymics css properties (that would come from scope) or even mixins (made using helpers).

What can be bad in such dynamic (live bound) styles?

Contributor

whitecolor commented Oct 29, 2015

@justinbmeyer @marshallswain

What do you think about making styleshits dynamic using stache templtes? it could allow intresting technics of styling components with dymics css properties (that would come from scope) or even mixins (made using helpers).

What can be bad in such dynamic (live bound) styles?

@justinbmeyer

This comment has been minimized.

Show comment
Hide comment
@justinbmeyer

justinbmeyer Oct 29, 2015

Contributor

@whitecolor I think it's an interesting idea. I wonder what advantageous it would have over simply changing an element's style properties?

To do this right, you'd want a CSS parser, and a CSS target, and cssRule can.view.live method. This way, the updates to CSS rules can happen efficiently.

Browser support with CSS rules is a bit all over the place I think if you go back far enough.

Contributor

justinbmeyer commented Oct 29, 2015

@whitecolor I think it's an interesting idea. I wonder what advantageous it would have over simply changing an element's style properties?

To do this right, you'd want a CSS parser, and a CSS target, and cssRule can.view.live method. This way, the updates to CSS rules can happen efficiently.

Browser support with CSS rules is a bit all over the place I think if you go back far enough.

@marshallswain

This comment has been minimized.

Show comment
Hide comment
@marshallswain

marshallswain Oct 29, 2015

Member

@whitecolor I think it's a really good idea. I'm not sure how often I would use it, other than with the occasional tricky layout. I agree that using the helper syntax isn't very fun, but it doesn't look quite as ridiculous when you use it in a component. :)

Member

marshallswain commented Oct 29, 2015

@whitecolor I think it's a really good idea. I'm not sure how often I would use it, other than with the occasional tricky layout. I agree that using the helper syntax isn't very fun, but it doesn't look quite as ridiculous when you use it in a component. :)

@justinbmeyer

This comment has been minimized.

Show comment
Hide comment
@justinbmeyer

justinbmeyer Nov 13, 2015

Contributor

@whitecolor you mean:

$('head').append(can.stache('<style>body {color: {{color}} }</style>')(map))

right?

Contributor

justinbmeyer commented Nov 13, 2015

@whitecolor you mean:

$('head').append(can.stache('<style>body {color: {{color}} }</style>')(map))

right?

@justinbmeyer

This comment has been minimized.

Show comment
Hide comment
@justinbmeyer

justinbmeyer Nov 13, 2015

Contributor

Fixed this in #2083. @whitecolor check it out.

Contributor

justinbmeyer commented Nov 13, 2015

Fixed this in #2083. @whitecolor check it out.

@justinbmeyer justinbmeyer added the bug label Nov 13, 2015

@daffl daffl closed this in #2083 Nov 30, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment