anywhichway/tlx

data binding attribute directives?

Closed this issue · 11 comments

pwFoo commented

t-if, t-foreach, ... don't update if I change the values of variable.
Isn't it supported or is a working example available?

Usage:

  • change show / hide state of an if
  • change / replace / add / remove an list element (t-foreach / t-forvalues)
anywhichway commented
pwFoo commented

Tested it the same way as in example in #5, nur instead of ${mykey} I need to use ${model.mykey} to get it initially work. Update in web developer console has no effect.

model.mykey='test'

Maybe Same problem? Do I need to use / call the reactive proxy? How to do so?

anywhichway commented

@pwFoo Fixed in v1.0.24. Unit test and example added.

pwFoo commented

Hi @anywhichway
that doesn't work for me:

<div id="if" t-if=${show}>Will be shown</div>

It works with ${model.show}.

<div id="if" t-if=${model.show}>Will be shown</div>

Any idea how model prefix is needed? Example is without it?

        const model = tlx.reactor({show: true});
        tlx.view(document.getElementById("if"),{model});

With tlx.reactor() it's possible to change the state from console! That's fine, but I think it should work without model.?

anywhichway commented

@pwFoo The model prefix should not be needed. What browser are you using?

Also, please see the examples directory and try issue7.html. That is working for me.

pwFoo commented

Chrome, but it looks like variable / const dependent?

Works fine with your example and my own if I use model, but if I bind a second model model2 that doesn't work? Is the number in the variable name a problem?

After compare the code of the working example and my example I don't understand why a const model2 or (to remove the number...) models not work and model works fine? Any idea?

anywhichway commented

Make sure you are doing this:

<script type="text/javascript">
        const model2 = tlx.reactor();
        tlx.view(document.getElementById("field1"),{model:model2});
        tlx.view(document.getElementById("field2"),{model:model2});
        tlx.view(document.getElementById("firstName"),{model:model2,linkModel:true})
</script>

and not this:

<script type="text/javascript">
        const model2 = tlx.reactor();
        tlx.view(document.getElementById("field1"),{model2});
        tlx.view(document.getElementById("field2"),{model2});
        tlx.view(document.getElementById("firstName"),{model2,linkModel:true})
</script>

An easy mistake to make when using shorthand object assignment.

pwFoo commented

That's it! 👍
With model I used model and with model2 model2 instead of model:model2!
Works fine!

So model is a shortcut for model:model?

pwFoo commented

Have you a working and updating example for t-forvalues?

Something like...

        const persons = tlx.reactor([
                {name: "One", age: 19},
                {name: "Two", age: 21}
            ]);

        tlx.view(document.getElementById("forvalues"),{model:persons});

To fill

    <table id="forvalues" t-forvalues="${persons}">
        <tr>
            <td>Name: ${value.name}</td><td>Alter: ${value.age}</td>
        </tr>
    </table>

And from console update / add another person like

persons.push({name: "Three", age: 33})

Should add the third person?

pwFoo commented

Would be great to loop through objects and use the key inside of the loop?

    <table id="forvalues" t-forvalues="${persons}">
        <tr>
            <td>Name: ${name}</td><td>Alter: ${age}</td>
        </tr>
    </table>

And remove / append / update the array of objects with javascript / web developer console

anywhichway commented