Replace default html data on first update

[Javiani]

To be more straight-foward on my question, allow me to show a simple code:

Html view

<button type="button">Save</button>

Template button.monk

{{ action }}

import Monkberry from 'monkberry'
import Template  from 'templates/button.monk'

const view = Monkberry.render( Template, document.querySelector('button') )
view.update({ action: 'Delete' })

I would expect this:

<button type="button">Delete</button>

But instead, I have the following:

<button type="button">SaveDelete</button>

Why do I need that? Because I always prefer the initial html state to be rendered by server-side, and I still like the old unobstructive way of doing front-end. So only after some user interaction or some given situation I would let js to update the dom. Is that possible on Monkberry? Or to use this library we always need to set initial state on javascript?

[antonmedv]

It's because monkberry do appendTo dom on render, true to do something like this before render:

Button.innerHtml = '';

[Javiani]

Oh.. ok, I had the same idea... But I just used a simple example to illustrate the issue. Html can be way more complicated then that example I gave. So, I think the only way to fix this is to empty every nodes that has textContent before the first monkberry .update() call, and let the future calls to be handled by monkberry "virtual dom" logic.

Just thinking out loud...I use Monkberry just as a template engine, I don't need the whole component interface, I have already written a event driven DOM library that solves any problem of components creations and relationships on a application, I called it Jails. And it's really easy to integrate with any other library, and solve the componentization problem, so it's very tiny.

I'm looking for some template engine with some kind of virtual dom, incremental-dom or such thing like that, just a simple template system, no event binding or any other complex stuff..

It's really hard to find something like this and when I find, the library is very complex to use or it is very heavy, like 50kb or more... I always fall into these component libraries that do exactly the same thing :
riot.js vue.js ractive.js monkberry ... etc

I was wondering, why so many solutions that do exactly the same thing. And why there's absolutely no template system easy to use, lightweight, that uses some kind of dom virtualization... we only have that kind of template system already coupled to event binding, directives, and other stuffs on components libraries...

The only library that implements a template system easy to use + virtual dom, without compiling (if you don't need to), is Riot.js and without any issues. However, you have to load a whole bunch of stuff that you won't need within the library. Why to compete with several good component libraries, instead of being completely successful in a place there is absolutely NO competitive template engine ( with dom virtualization ) for browser out there.. It's not a criticize... I fell that monkberry is in the same level of the other ones, Is just a question which I'd like to do to the devs of each libraries we have today..

[antonmedv]

So..., what is your queation?

[Javiani]

hahahah, sorry I was just thinking out loud... never mind.
Thanks @Elfet.