atmin / jtmpl Goto Github PK

View Code? Open in Web Editor NEW

40.0 40.0 3.0 1.82 MB

Mustache syntax + automatic data-binding = Live templates ☆

Home Page: jtmpl.com

License: MIT License

JavaScript 92.21% HTML 7.79%

jtmpl's People

Contributors

Stargazers

Watchers

Forkers

vdimchev namanyayg pawelsamselarkena

jtmpl's Issues

Blocks and template inheritance

Blocks and template inheritance akin to Django template inheritance

<script id="base" type="text/html">
  {{+primary_block}}
    Block contents is template code, of course
  {{/primary_block}}
  {{+secondary_block}}
    Some secondary content
  {{/secondary_block}}
</script>

<script id="descendant" type="text/html">
  {{<"#base"}}

  {{+primary_block}}
    Will override #base's primary_block content
  {{/primary_block}}
  {{+secondary_block}}
    If this block was non-existent, you would see "Some secondary content" from #base
  {{/secondary_block}}
</script>

Syntax inspired by Dust

Requests API

GET

jtmpl('GET', 'url', function (response) { ... } )

When content-type: application/json, response is parsed object, otherwise string

POST

jtmpl('POST', 'url' [, params][, function (error, response) { ... }])

Routes

var model = {
  '#route1': function () { ... },
  '#another-route': function () { ... }
}

Template:

<a href="#route1">Trigger model['#route1']</a>
<a href="#another-route">Trigger model['#another-route']</a>

Formatters

Format variable output

{{name|capitalize}}

sync model with server?

hey i think this project looks really cool. found it from your comment here: https://moot.it/blog/technology/frameworkless-javascript.html

i think its interesting that you chose not to have jquery as a dependency, since its already pretty ubiquitous. maybe this is out of the scope of the project but how would you recommend syncing model with a server without having to include jquery?

it would be a shame to have to include jquery to do this, and if you assume people would need it for other functionality, you might as well make it a dependency if it makes coding simpler.

Refactor

Make jtmpl a processor of lists of rules:

compile rules, like:

{
pattern: /regexp with groups/,
replace: function (groups, model) { ... },
push: boolean or undefined,
pop: boolean or undefined
}
bind rules, TBD

Wanted effect: DRY code, pay technical debt, plugin system:

jtmpl.compileRules.push({ pattern: ..., replace: .... });
jtmpl.bindRules.push({ ... });
jtmpl.filters.push({ ... });
jtmpl. ... .push({ ... });

Mappings / Filters

Can be applied on arrays and event streams.

{{#sequence|mappingFunction}}

onevent="{{eventHandler|eventFilter}}"

// This function lives in `jtmpl.mappings` or in `model` where `sequence` is defined
// jtmpl.mappings.mappingFunction = function (el, i) ...
// or
model.sequence = [...];
model.mappingFunction = function (el, i) {
  if (el.conditionSatisfied) {
    return mappedElement;
  }
  // `return` or `return null` means this element should be filtered
}

model.eventFilter = function (event) {
  return someCondition ? event : null;  // or any falsy value
}

Computed variables

Computed variable

var model = {
  firstName: 'Random',
  lastName: 'Number',
  fullName: function () {
    return this('firstName') + ' ' + this('lastName');
  }
}

jtmpl('{{fullName}}', model)
// Random Number

fullName will be called whenever any of the dependent fields changes. A function, that takes care of dependency tracking and returns property value is passed via the this context.

Set computed variable

var model = {
  firstName: 'Random',
  lastName: 'Number',
  fullName: function (newValue) {

    // Setter? (idiomatic comparison, getters always receive a callback argument)
    if (typeof newValue !== 'function') {
      var names = newValue.split(' ');
      this('firstName', names[0]);
      this('lastName', names[1]);
    }

    // Getter
    return this('firstName') + ' ' + this('lastName');
  }
}

jtmpl('#target', '<input value="{{fullName}}">', model);

// If you input "Random Number" into the field, then:
// model.firstName === 'Random' and model.lastName === 'Number'

Asynchronous computed variable

var model = {
  id: 1,
  contents: function (callback) {
    jtmpl('GET', 'http://example/RESTservice/' + this('id'), callback);

    // if the function returns undefined, jtmpl expects callback to be called
    // with the result value
  }

jtmpl('#target', '{{contents}}', model);
// a service will return contents for the respective model.id

model.id = 2
// "http://example/RESTservice/2" will be fetched

Asynchronous computed context (read-only)

var model = {
  id: 1,
  person: function (callback) {
    // API should return 'application/json' response, so it's parsed
    // Whenever model.id is changed, person context is updated
    jtmpl('GET', '/api/person/' + this('id'), callback);
  }
}

Template:

{{#person}}
{{firstName}} {{lastName}} is {{age}} years old
{{/person}}

bug in TodoMVC implementation

you can edit a few items in parallel. Try to double click an item and then do the same to another. he correct behavior would be for the 1st item to stop being editted

Section inside <table> doesn't update

section inside <table> has bug: model's section changes, the <table> doesn't change.

See it in JSFiddle: http://jsfiddle.net/SJ4J4/

<table id="tableNotUpdate">
  <tbody>
    <!-- {{#section}} -->
    <tr>
      <td>{{name}}</td>
      <td>{{score}}</td>
    </tr>
    <!-- {{/section}} -->
  </tbody>
</table>

var model = {
  section: [
    { name: 'Tom', score: 90 },
    { name: 'John', score: 84 }
  ]
};
jtmpl('#tableNotUpdate', '#tableNotUpdate', model);

Run model.section.push({ name: 'Mary', score: 97 }) in console.
Throw Uncaught TypeError: Cannot read property 'innerHTML' of undefined

Partials

Partials (template include)

{{>var_template_id_or_url}}
{{>"#template-id"}}
{{>"//xhr-fetch-template.url"}}

"http:" or "https:" part can be omitted, so it'll inherit current scheme

Included templates inherit their parent context.