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

can-autorender #1390

Closed
justinbmeyer opened this Issue Jan 5, 2015 · 2 comments

Comments

Projects
None yet
3 participants
@justinbmeyer
Contributor

justinbmeyer commented Jan 5, 2015

Based on: https://github.com/bitovi-components/component-utils/blob/master/autoloader.js, I'm proposing a can-autorender attribute that will be used to automatically render templates. For example:

<body>
  <script type='text/stache' can-autorender id='demo'>
    <h1>{{message}}</h1>
  </script>
  <script src='canjs.js'></script>
  <script>
    $("#demo").scope().attr("message", "Hello World");
  </script>
</body>

Would result in:

<body>
  <script type='text/stache' can-autorender id='demo'>
    <h1>{{message}}</h1>
  </script>
  <h1>Hello World</h1>
  <script src='canjs.js'></script>
  <script>
    $("#demo").scope().attr("message", "Hello World");
  </script>
</body>

This should be available on normal elements. Consider:

<body can-autorender type='text/stache'>
  <h1>{{message}}</h1>
  <script src='can.js'></script>
  <script>
    $("body").scope().attr("message", "Hello World");
  </script>
</body>

If can-autorender is on a non-script element, any scripts within that element should NOT be rendered as part of the template.

Rendering

The embedded templates should be rendered on dom content loaded.

If the source element is in the <head> the rendered result will be appended to the <body>.

Scope

If can-autoload is placed on a script tag, a can.Map instance will be available on the script element:

$("script#demo").scope() //-> can.Map

It's possible that the scope will want to be accessed prior to rendering. For this reason, can.scope should be made to create a can.Map instance if one does not already exist.

Other Considerations

  • We might need to patch DOMContentLoaded for other libraries.
  • We might want to specify a src so these templates can be loaded outside the page.

cc @sykopomp

justinbmeyer added a commit that referenced this issue Jan 5, 2015

@justinbmeyer

This comment has been minimized.

Show comment
Hide comment
@justinbmeyer

justinbmeyer Jan 5, 2015

Contributor

Here's what the slider might look like with autorender:

<script type='text/stache' can-autorender>
    <can-import from="can-slider"/>
    <can-slider></can-slider>
</script>
<script src="./node_modules/steal/steal.js" main="can/view/autrender"></script>
Contributor

justinbmeyer commented Jan 5, 2015

Here's what the slider might look like with autorender:

<script type='text/stache' can-autorender>
    <can-import from="can-slider"/>
    <can-slider></can-slider>
</script>
<script src="./node_modules/steal/steal.js" main="can/view/autrender"></script>
@zkat

This comment has been minimized.

Show comment
Hide comment
@zkat

zkat Jan 5, 2015

Contributor

woo! +1!

can-autoload gets my vote over can-render.

Do you want me to just grab autoload.js as-is and make a pull request of it? As far as the src= feature goes, I think that should be a separate issue+PR. I'm assuming what you meant by that is that you want to be able to do:

<script src=my/template/thing.stache type=text/stache></script>

Would be nice if we could omit the type in cases like this, but the browser won't cooperate with us on this one. :)

Finally: I'm not sure what patching is needed about the DOMContentLoaded thing. I'm not familiar with Moo and YUI. I assume Zepto has the same fudged load event jQuery does.

Contributor

zkat commented Jan 5, 2015

woo! +1!

can-autoload gets my vote over can-render.

Do you want me to just grab autoload.js as-is and make a pull request of it? As far as the src= feature goes, I think that should be a separate issue+PR. I'm assuming what you meant by that is that you want to be able to do:

<script src=my/template/thing.stache type=text/stache></script>

Would be nice if we could omit the type in cases like this, but the browser won't cooperate with us on this one. :)

Finally: I'm not sure what patching is needed about the DOMContentLoaded thing. I'm not familiar with Moo and YUI. I assume Zepto has the same fudged load event jQuery does.

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