Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    barspublic

    Bars

    GitHub release npm version npm downloads npm downloads

    Bars is a lightweight high performance HTML aware templating engine. Bars emits DOM rather than DOM-strings, this means the DOM state is preserved even if data updates happen. Bars can also emit DOM-strings for backend templating if desired. This way one can use Bars for both static content generation and dynamic web application views.

    Make Bars Better

    Bars is still in early development, please share any suggestions and report any bugs to the GitHub issues page, so we can continue to improve Bars. If you want to contribute to Bars, fork Bars on GitHub and send in a pull request. For ways to contribute check out the issues page on GitHub.

    Install:

    $ npm install bars
    

    What Bars Looks Like

    Bars Language and Docs.

    index.bars:

    <h2>To Do App</h2>
    <input id="new-list" todos:{{todos}} placeholder="Add something to your list..." />
    <ul>
    {{#each todos as |todo index todos|}}
      <li class="{{todo.del ? 'del' : ''}}">
        <div>
          <span class="list-complete {{todo.complete ? 'done' : ''}}" todo:{{todo}}></span>
          <span class="list">{{todo.text}}</span>
          <span class="list-del" todo:{{todo}} todos:{{todos}}>x</span>
        </div>
      </li>
    {{else}}
      <li>
        <span>You have nothing left to do.</span>
      </li>
    {{/each}}
    </ul>

    app.js:

    var App = require('bars/app');
     
    var app = new App(
        // options
        {
            index: require('./index.bars'),
            // partials: {},
            // transforms: {}
        },
     
        // State
        {
            todos: [
                {
                    text: 'Buy eggs'
                }
            ]
        }
    );
     
    app.view.on('click', '.list-complete', function (evt, target){
        var todo = target.data('todo');
        todo.complete = !todo.complete;
        app.render();
    });
     
    app.view.on('click', '.list-del', function (evt, target){
        var todo = target.data('todo');
        var todos = target.data('todos');
     
        todo.del = true;
        app.render();
     
        setTimeout(function () {
            todos.splice(todos.indexOf(todo), 1);
     
            app.render();
        }, 200);
    });
     
    app.view.on('change', '#new-list', function (evt, target){
        var todos = target.data('todos');
     
        var todo = {
            del: true,
            text: target.value
        };
     
        todos.unshift(todo);
        app.render();
        target.value = '';
     
        setTimeout(function () {
            delete todo.del;
            app.render();
        }, 0);
    });
     
    app.appendTo(document.body);

    install

    npm i bars

    Downloadslast 7 days

    3

    version

    1.9.6

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar
    • avatar