mateusmaso / handlebars.binding Goto Github PK

View Code? Open in Web Editor NEW

29.0 29.0 4.0 266 KB

Handlebars plugin for using one-way data binding

License: MIT License

JavaScript 99.21% HTML 0.79%

data-binding handlebars javascript

handlebars.binding's People

Contributors

Stargazers

Watchers

Forkers

dak notyoyoma silverwind mitsh

handlebars.binding's Issues

Bind inside each context object

Uncaught TypeError: Handlebars.parseHTML is not a function

i try to load handlebars.element with require.js but get this error:

Uncaught TypeError: Handlebars.parseHTML is not a function

this a module that i defined:

define("Index", ["require", "exports", "handlebars", "jquery", "bootstrap", "handlebars.binding"], function (require, exports, Handlebars) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    $(function () {
        var Context = {
            Title: "loremipsum",
            Description: ""
        };
        var Template = Handlebars.compile($("#TestTemplate").html());
        var Nodes = Handlebars.parseHTML(Template(Context));
        $(Nodes).appendTo("#test");
        setTimeout(function () {
            Context.Description = "lorem ipsum dola sit amet.";
            Handlebars.update();
        }, 3000);
    });
});

binding inside #each

template:

{{#each items bind=true}}
    <h2>Item {{bind "index"}}: {{bind "name"}}</h2>
    <h1>
    {{#if "foo" bind=true}}
        Hello {{foo}}
    {{else}}
        Goodbye
    {{/if}}
    </h1>
{{/each}}

code:

var context = {
    items: [
        {name: "tom", foo: "a"},
        {name: "cat", foo: "b"}
    ]
};

var templateScript = $('#book').html();
var template = Handlebars.compile(templateScript);
var nodes = Handlebars.parseHTML(template(context))

$(document.body).prepend(nodes);

setTimeout(function() {

    // works
    context.items[0] = {name: "Alex", foo: ""};

    // don't works
    context.items[0].name = "Alex";
    context.items[0].foo = "";
}, 1000*5);

I think it is clear from the code, what is the problem.

if use other template:

{{#each items var="item" bind=true}}
    <h2>Item {{bind "index"}}: {{bind "item.name"}}</h2>
    <h1>
    {{#if "item.foo" bind=true}}
        Hello {{item.foo}}
    {{else}}
        Goodbye
    {{/if}}
    </h1>
{{/each}}

then it works, but the error is visible in the console (both methods context changes):

observe.js:753 Exception caught during observer callback: TypeError: Cannot read property 'appendChild' of null

Error if use "if" into "each"

My test template

{{#each items var="item" bind=true}}
    <h2>Item {{bind "index"}}: {{bind "item.name"}}</h2>
    {{#if "../foo" bind=true}}
        <h1>Hello {{../foo}}, {{../bar}}</h1>
    {{else}}
        <h1>Goodbye</h1>
    {{/if}}
{{/each}}

and my code:

// init data
var context = {
    foo: "foo_old",
    bar: "bar_old",
    items: [
        {name: "tom"},
        {name: "ben"}
    ]
};

var templateScript = $('#book').html();
var template = Handlebars.compile(templateScript);
var nodes = Handlebars.parseHTML(template(context))

$(document.body).prepend(nodes);

setTimeout(function() {
    context.foo = "";
    context.bar = "updated_bar";
    context.items.push({name:"Joch"});
    context.items[1].name = "Alex";
    context.items.splice(0,1); // it destroys the indexes, but removes the element. Bug?
}, 1000*5);

Platform.performMicrotaskCheckpoint();

if you run this code, the debugger displays an error:

Uncaught TypeError: Cannot read property '' of undefined

if you run this code with other template (without "if" into "each"):

{{#if "foo" bind=true}}
    <h1>Hello {{foo}}, {{bar}}</h1>
{{else}}
    <h1>Goodbye</h1>
{{/if}}
{{#each items var="item" bind=true}}
    <h2>Item {{bind "index"}}: {{bind "item.name"}}</h2>
{{/each}}

then the errors do not watch.(Besides indexes)

I'm doing something wrong, or is this a bug? Thank you in advance.

Sorry for my English. I am not a native speaker.

Bind helper not rendering data to the DOM

Maybe I'm doing it wrong, but It seems I cannot get data to render with the basic bind helper. Here's a standalone example which you can save to a file and open:

<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>
<main></main>
<script src="https://unpkg.com/handlebars/dist/handlebars.js"></script>
<script src="https://unpkg.com/handlebars.binding/dist/handlebars.binding.js"></script>
<script id="template" type="text/x-handlebars-template">{{bind "foo"}}</script>
<script>
  const main = document.querySelector("main");
  const template = document.querySelector("#template");
  const context = {foo: 123};
  const html = Handlebars.compile(template.innerHTML)(context);

  console.log("html:", html);
  console.log("parsed:", Handlebars.parseHTML(html));
  main.innerHTML = html;
</script>
</body>
</html>

The resulting hb-binding element is rendered empy and the script logs

html: <hb-binding id="cf8f8059-51d1-3674-ae6b-da7ba4643844"></hb-binding>
parsed: Array [ #text "123" ]

I tried running Handlebars.update() after inserting it DOM, but it didn't help either. Any idea why the data is seen in parseHTML, but not actually added to the DOM?

in my project I am using multiple instances of Handlebars for different HTML elements, which are created using handlebarsBinding(createHandlebarsInstance()).
I noticed that somehow they different instances interfere, which means when I update one instance, the other receives DOM manipulations as well.

I am currently trying to reproduce it in a CodePen, but maybe this is a known issue already?

Tests

Examples

bind is showing context value

Hello,

I'm trying to use handlebars.binding, but even with a very simple exemple, I can't make any data synchronisation. When using {{bind "variable"}} even the initial value is not displayed.

Here is a fiddle with my code : https://jsfiddle.net/1yj1y4vx/5/

Kind regards,

Sébastien

How to add binding to own helper

Hi,

I have several own helpers that need to be bound like so:

{{#if 'selectedComponent' bind=true}}
    {{#bind 'selectedComponent.name'}}
        {{getPropertyTranslation selectedComponent.name}}
    {{/bind}}
{{/if}}

So basically if the component is set, I want to display the result of the getPropertyTranslation helper, which gets the component name passed as a parameter. The thing is, name is an object and this causes the binding to not work.
It does work if I use the following:

    {{#bind 'selectedComponent.name.en'}}

However, I cannot simply access .en or any other key as I do not know what keys exist.

What I need is #bind to respond to the value of my getPropertyTranslation helper I guess, like so:

{{getPropertyTranslation selectedComponent.name bind=true}}

Not working with multiple Handlebars instances

Hi,

if I create dynamic Handlebars instances via Handlebars.create() and pass each to the handlebars.binding-function, it only works the first time.
For the second call the function returns an un-extended Handlebars instance which lacks the parseHTML()-function.

I guess the issue comes from

handlebars.binding/src/index.js

Line 30 in afe695b

if (!deps.Handlebars) {

which makes the function only invokable once. Maybe there is a way to get around this?

Nested each-loops: Index does not work

In nested for loops, index seems to always reference the outer index and not the inner one.
{{../index}} is equal to {{index}} within the inner loop.

Each binding does not work when inside a select

The following code will not render any option elements inside the select.

<select>
    {{#each items bind=true}}
        <option value="{{value}}">{{name}}</option>
    {{/each}}
</select>

Handlebars.registerElement is not a function

Hi, i am very interested about this repo, because data binding is a feature that i need in my handlebars app. But i was testing it and learning how to use it, and i got his problem.

Uncaught TypeError: Handlebars.registerElement is not a function(anonymous function) @ handlebars.binding.js:413Utils @ handlebars.binding.js:17(anonymous function) @ handlebars.binding.js:20
templates-bind.html:11 

Uncaught TypeError: Cannot read property 'templates/foo' of undefined(anonymous function) @ templates-bind.html:11

my code

<html>
   <head>

    <script type="text/javascript" src="node_modules/handlebars/dist/handlebars.runtime.js"></script>
    <script type="text/javascript" src="node_modules/handlebars.binding/dist/handlebars.binding.js">      </script>

   </head> 
   <body>

       <script type="text/javascript">
       var context = {foo: 123};
       var template = Handlebars.templates["templates/foo"];
       var nodes = Handlebars.parseHTML(template(context));

       document.getElementsByTagName('body').appendChild(nodes);

       context.foo = 321;

       </script>

   </body>
   </html>

The paths are corrected, there's something that i am missing?
Thanks

mateusmaso / handlebars.binding Goto Github PK

handlebars.binding's People

Contributors

Stargazers

Watchers

Forkers

handlebars.binding's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs