dynamic binding to child html

[weepy]

sometimes a binding might write html to an element and then we want to control the css of a child element. E.g.

<div data-bind='html: html;'></div>

o = {
  html: '<p></p>',
  paragraph_css: { color: 'red'}
}

bind(o, 'div')

question is - how to bind the paragraph_css to the <p> tag that's created ?

[weepy]

so binding markup could be like :

<div data-bind="html: html(); css('p'): paragraph_css()"></div>

but that seems a bit lame

[weepy]

alternatively the inserted html could have bound property:

<div data-bind="html: html();"></div>
...

object.
o_O.bind({
    html: function() {
      return "<p data-bind='css: paragraph_css()'></p>"
    }, 
    paragraph_css: function() { return { 
      color: 'red' 
    } 
}, 'div')

In this case we'd have to special case .html to rebind inserted HTML ?

[weepy]

or perhaps we could have expressions as attribute names:

<div data-bind="html: html(); find('p').css: paragraph_css()"></div>

[weepy]

should be able to do :

<div data-bind="html: html();"></div>
...

o_O.bind({
    html: function() {
      return "<p data-bind='css: paragraph_css()'></p>"
    }, 
    paragraph_css: function() { return { 
      color: 'red' 
    } 
}, 'div')

[weepy]

also could potentially get access to o_O.current.$el and o_O.current.context