the following works fine,
<!doctype html> <html> <body> <element name="x-editable" constructor="editablecomponent" extends="div"> <template> <div style="display: {{editing ? 'block' : 'none'}}"> <content select=".editing"></content> </div> <div style="display: {{editing ? 'none' : 'block'}}"> <content select=".normal"></content> </div> <script type="application/dart" src="xeditable.dart"></script> <script src="packages/browser/dart.js"></script> </template> </element> </body> </html> it grabs children within x-editable have .editing , .normal, , displays them according whether bool editing true or not.
however, following not work,
<!doctype html> <html> <body> <element name="x-editable" constructor="editablecomponent" extends="div"> <template> <template instantiate="if editing"> <content select=".editing"></content> </template> <template instantiate="if !editing"> <content select=".normal"></content> </template> <script type="application/dart" src="xeditable.dart"></script> <script src="packages/browser/dart.js"></script> </template> </element> </body> </html> it did not grab of .editing or .normal children. obviously, doing wrong, what?
unfortunately, <content> not work within nested template tags. it's annoying there workarounds. workaround of setting display of div seems work case. in other situations may make more sense split component multiple parts.
Comments
Post a Comment