nette/application

No check of overwriting id attribute for dynamic snippets

dakur opened this issue · 2 comments

dakur commented

Version: 3.0.2

Bug Description

When I set up my own id attribute on an HTML element which also holds n:snippet attribute with dynamic name ('snippet-post' . $post->id), it turns up that a check which is implemented for static snippets is not triggered in case of dynamic ones.

That leads to obscure situations when rerendering of snippets suddenly stops working and you wonder how it is possible when you just added id attribute to HTML (!) and do not know under-the-hood of snippets.

Steps To Reproduce

Use this code and see that the date is not changing when hitting the button:

final class SomePresenter extends Presenter
{
  public function createComponentSomeForm()
  {
    return new Multiplier(function () {
      $form = new Form();
      $form->addSubmit('submit');
      $form->onSuccess[] = function () {
        $this->template->timeOfGeneratingThisValue = \date('d.m.Y H:i:s');
        $this->redrawControl();
      };
      return $form;
    });
  }
}
<script src="https://unpkg.com/naja@1.7.0/dist/Naja.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  naja.uiHandler.selector = '[data-naja]';
  naja.initialize();
});
</script>
<div n:foreach="[1, 2, 3] as $id" id="post-{$id}" n:snippet="'snippet-post' . $id">
  {$timeOfGeneratingThisValue}

  <form n:name="'someForm-post' . $id">
    <button n:name="submit">rerenderer</button>
  </form>
</div>

Expected Behavior

Shout the same thing as on static snippets.

Possible Solution

Actually using id attribute to handle snippet is not clean/semantic solution. id attribute is too generic and can be used by anyone with access to DOM so it should be frontendist's privilege to decide what it will be used for and how and backend should not/must not force its own usage. I understand that it came from time of HTML 4, but it should be reconsidered now.

I suggest to take advantage of data-* attribute and set up custom attribute something like data-nette-snippetId which is sure enough not to be collided with anyone else's interest.

dg commented

Fixed.

You can change snippet's HTML attribute this way:

final class SomePresenter extends Presenter
{
	public function templatePrepareFilters($template): void
	{
		$template->getLatte()->getCompiler()->getMacros()['snippet'][0]->snippetAttribute = 'data-snippet';
	}
}

I know this is a very complicated way, but there must first be some discussion of how to change it in order to not disrupt the function of components that rely on the original attribute name.

dakur commented

😮 That's crazy, but I understand. Thank you for the fix anyway!