Updating a template from within itself can break things

[natecavanaugh]

I've pasted an example of the Soy file and the js here: https://gist.github.com/natecavanaugh/c9d98fceb794757abe73

The gist of it is though that inside of the body template, on input I call updateBD, which will update the bodyContent property of the template with the value (but I believe this could be any variable passed to the template).
If you build that component, you can see that it is completely unusable.
Where I can see something like this being important is in something like the CharCount module, where we need to say how many characters we have left.

Let me know if there are any questions about reproducing it.

[eduardolundgren]

That example is an expected behavior for the template defined.

1. The surface body has an input that tries to re-paint itself.
2. In order to work the input can be isolated in a separate surface, the following example works as expected:

{namespace Templates.MyComponent}

/**
 * This renders the main element. Component template parts are called from
 * this template by invoking, e.g. `{delcall MyComponent.header data="all" /}`.
 * Component parts could be named by the developer.
 */
{template .content}
  {delcall MyComponent.header data="all" /}
  {delcall MyComponent.input data="all" /}
  {delcall MyComponent.body data="all" /}
  {delcall MyComponent.footer data="all" /}
{/template}

/**
 * This renders the header part of the component.
 * @param headerContent
 */
{template .header}
  {$headerContent}
{/template}

/**
 * This renders the body part of the component.
 * @param bodyContent
 */
{template .body}
  <p>{$bodyContent}</p>
{/template}

/**
 * @param foo
 */
{template .input}
  <input name="foo" type="text" value="{$foo}" data-oninput="updateBD" />
{/template}

/**
 * This renders the footer part of the component.
 * @param footerContent
 */
{template .footer}
  {$footerContent}
{/template}

[eduardolundgren]

Next release contains huge improvements on that area, it will make cases like this much more intuitive.

For example, the input template can be called anywhere from inside body template.

The {delcall MyComponent.input data="all" /} will completely isolate the input rendering to avoid conflicts when the parent body template re-render.

{namespace Templates.MyComponent}

/**
 * This renders the main element. Component template parts are called from
 * this template by invoking, e.g. `{delcall MyComponent.header data="all" /}`.
 * Component parts could be named by the developer.
 */
{template .content}
  {delcall MyComponent.header data="all" /}
  {delcall MyComponent.body data="all" /}
  {delcall MyComponent.footer data="all" /}
{/template}
...
/**
 * This renders the body part of the component.
 * @param bodyContent
 */
{template .body}
  <span class="foo">{delcall MyComponent.input data="all" /}</span>
  <p>{$bodyContent}</p>
{/template}

/**
 * @param foo
 */
{template .input}
  <input name="foo" type="text" value="{$foo}" data-oninput="updateBD" />
{/template}
...

[mairatma]

This should be fixed now that we're using incremental dom :)