Hacker News new | ask | show | jobs
by daliwali 3274 days ago
I'm well aware that there must be an element and a selector for that element. But this is exactly how CSS works as well, it's separation of concerns. Only recently have inline styles become trendy, much to my dismay.

The total absence of templating syntax is a deliberate decision. It enables one to start from an HTML mock-up or static page, and build interactivity on top of that without changing any HTML.

1 comments

    this is exactly how CSS works as well
I beg to differ. There is no mapping needed for CSS. CSS works by once defining where the style shall go:

    <div class=city></div>
And once what the style is:

    .city {color: blue; font-family: arial;}
Similar, template syntax once defines where the data shall go:

    <div class=city>{{NAME}} has {{POPULATION}} residents</div>
And once, what the data is:

    city={name: "New York", population: 8491000}
Neither need additional mapping.
I'm not sure I understand what you mean by additional mapping.

Here's all that's needed in the template:

    <div class="city"><span class="name"></span> has <span class="population"></span> residents</div>
And the mapping would be:

   [ 'city': [ '.city', { name: '.name', population: '.population' } ] ]
If you don't want to manually define a mapping, you could do it automatically by assuming that some attribute like `data-bind` corresponds to a binding, but Simulacra.js doesn't make assumptions like that.

    you could do it automatically by assuming that some
    attribute like `data-bind` corresponds to a binding
Yes, that could be done. That would mean to extend Simulacra. Or do it outside of it.

To me personally, <div>{{NAME}}</div> is easier to read and reason about. Also, it enables you to do stuff like

    <div>{{CITY}} has {{POPULATION}} residents</div> 
Which is much shorter then

    <div><span data-bind="city"></span> has <span data-bind="population"></span> residents</div>
You can also do other useful stuff. For example:

    <div class="{{STATUS}}">{{MACHINE}}</div>
And then style different statuses via CSS.
Sorry, but avoiding templating syntax was really a hard design goal. It may not be a tool for everyone.

The reason is that every templating language I've used either is or becomes a Turing-complete language by itself.

What would force you to make your own templating language turing complete?