3 ms·
Using class names was just an example, people may get the wrong impression that has anything to do with the variable name. It could have been made more explicit
by daliwali 9y ago
Using class names was just an example, people may get the wrong impression that has anything to do with the variable name. It could have been made more explicit, but I wanted to be as terse as possible:
<h1 class="name" data-bind="name"></h1>
It was also a design goal not to introduce a templating syntax, so `{{}}` brackets are out of the question.
- TekMol 9y agoI see now, that the bindObject() function takes a mapper from data to DOM. There are two downsides to this: 1) You have to define twice where the data is displayed. Once in the template and then again in the mapper. 2) <div>{{NAME}}</div> explicitly tells the reader "The name goes here". In your solution one would have to look it up in the mapper to be sure what goes where.
- daliwali 9y agoI'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.
- TekMol 9y agothis 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.
- daliwali 9y agoI'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.
- TekMol 9y agoyou 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.
- daliwali 9y agoSorry, 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.
- TekMol 9y agoWhat would force you to make your own templating language turing complete?