[Question] How to allow special characters in class name or data attribute?

In my HTML code, I have some variable placeholders defined in element's class name or data attributes. For example, consider following code block,

	<div class="list-container" data-page-id="{{page.id}}">
		<ul class="{{list.className}}" data-list-id="{{list.id}}">
			<li data-list-id="{{list.item.id}}">List Item 1</li>
			<li data-list-id="{{list.item.id}}">List Item 2</li>
		</ul>
	</div>

When I load this in the editor, it removes them and I can't get them back while exporting the code via editor.getHTML(). So, the result of above code is as below,

<div data-page-id="{{page.id}}" class="list-container">
  <ul data-list-id="{{list.id}}" class="-list-className-">
    <li data-list-id="{{list.item.id}}">List Item 1
    </li>
    <li data-list-id="{{list.item.id}}">List Item 2
    </li>
  </ul>
</div>

If you see the result, the class of ul element is changed from {{list.className}} to -list-className-.

Is there any way to preserve them while loading and exporting the HTML?

Please help.

Thanks