Try to bind a variable to t-content? #17

pwFoo · 2019-05-18T08:23:44Z

It works fine to set a string to t-content, but I tried to bind a variable as done inside of html elements with t-content.

I have a remote template, which loads fine after bug #15 was fixed.
Now I try to bind a variable instead of a text / html string to be flexible and easy update element content by ajax calls.

<div t-content="${myvar1}">template.html file content</div>

I see the initial html element content without t-content or values like t-content="my value" works fine and replaces the html content as should.
Just with variable like ${myvar1} is will be empty.

Is it supported to bind t-content to a variable?

The text was updated successfully, but these errors were encountered:

pwFoo · 2019-05-18T08:31:39Z

Tested variables inside of the element content works fine by the way. I bind the view() to the parent of the remote template and the firstname variable is filled as should.

Looks like t-content not supports variables?

anywhichway · 2019-05-18T09:31:13Z

@pwFoo Change the content of the template.html file in the examples directory to the below. It seems to work fine.

`

This message area was loaded remotely by remote_template.html. You should see the first name twice.

${firstname}

`

pwFoo · 2019-05-18T09:58:49Z

Strange. In my test it doesn't work with a second "model", firstname works for me too.

<html lang="en">
<head>
	<!--<script src="https://unpkg.com/tlx/browser/tlx.min.js"></script>-->
	<script src="https://unpkg.com/tlx@1.0.41/browser/tlx.min.js"></script>
	<style>
	input:invalid {
  		box-shadow: 0 0 5px 1px red;
	}
	</style>
</head>
<body id="body">
<div>
You must be loading this file over an http server for this example to work
</div>
<div id="message"></div>
<hr />
<div class="test1" style="color:red;">${myvar}</div>
<hr />
<div id="name">First Name: <input id="firstName" name="firstname" value="${firstname}" protect placeholder="Enter a name"></div>
<hr />
<div>Below there should be a message that a load has failed.</div>
<div id="fail"></div>
<script>

const model = tlx.reactor({firstname:"joe"}),
	 model2 = tlx.reactor({myvar:"TemplateContentVariableValue"}),
		url = new URL("./template.html",window.location.href),
	missing = new URL("./missing.html",window.location.href);


tlx.view(document.getElementById("name"),{model,linkModel:true});

tlx.view(document.getElementById("body"),{model:model2,linkModel:true});

tlx.view(document.getElementById("message"),{model,template:url.href});
tlx.view(document.getElementById("fail"),{model,template:missing.href});


//tlx.view(document.getElementsByClassName("test1"),{model:model2,linkModel:true});
//tlx.view(document.getElementById("test2"),{model:model2,linkModel:true});
</script>
</body>
</html>

template

<div id="remotetemplate1">template.html file content<br />${firstname}</div>
<div t-content="${myvar}"></div>
<div t-content="${firstname}"></div>

First and third line works as should, Second is empty?

pwFoo · 2019-05-18T09:59:32Z

myvar works in main html file in that line as should!

<div class="test1" style="color:red;">${myvar}</div>

pwFoo · 2019-05-18T10:06:16Z

another example based on issue6.html (nodelist test).

<!DOCTYPE html>
<html lang="de">
  <head>
  <style>
	input:invalid {
  		box-shadow: 0 0 5px 1px red;
	}
	</style>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Titel der Seite | Name der Website</title>
    <script src="https://unpkg.com/tlx@1.0.41/browser/tlx.min.js"></script>
  </head>
  <body>
  	<div>Populate multiple fields with one call</div>
    <div class="fields" id="field1">Hello ${firstname}</div>
    <div class="fields" id="field2">Hello ${firstname}</div>
    <div class="fields" id="field3">Hello ${firstname} ${lastname}</div>
    <div>First Name: <input id="firstName" name="firstname" value="${firstname}" placeholder="Enter a name" protect></div>
    <div t-content="${firstname}"></div>

    <script type="text/javascript">
        const model = tlx.reactor();
        //tlx.view(document.getElementById("field1"),{model});
        //tlx.view(document.getElementById("field2"),{model});
        //tlx.view(document.getElementById("field3"),{model});
        //[].forEach.call(document.getElementsByClassName("fields"), function(elem) {
        //    tlx.view(elem,{model})
        //});
        tlx.view(document.getElementsByClassName("fields"),{model,linkModel:true});
        tlx.view(document.getElementById("firstName"),{model,linkModel:true});
    </script>
  </body>
</html>

Added a <div t-content="${firstname}"></div> and so it should update with the firstname value I think? I think t-content is similar to execute view() and so bind to a element?
The field stays empty in my test.

anywhichway · 2019-05-19T19:52:47Z

@pwFoo Acknowledging your issue. It will take a day or so to get to this.

anywhichway · 2019-05-23T00:54:48Z

@pwFoo This code works. Your example did not work because you were trying to replace variables in the body element with model2 data and variables using model inside a nested remote template inside an element contained in body.

<html lang="en">
<head>
	<!--<script src="https://unpkg.com/tlx/browser/tlx.min.js"></script>-->
	<script src="https://unpkg.com/tlx@1.0.41/browser/tlx.min.js"></script>
	<style>
	input:invalid {
  		box-shadow: 0 0 5px 1px red;
	}
	</style>
</head>
<body id="body">
<div>
You must be loading this file over an http server for this example to work
</div>
<div id="message"></div>
<hr />
<div id="test1" style="color:red;">${myvar}</div>
<hr />
<div id="name">First Name: <input id="firstName" name="firstname" value="${firstname}" protect placeholder="Enter a name"></div>
<hr />
<hr />
<div>Below there should be a message that a load has failed.</div>
<div id="fail"></div>
<script>

const model = tlx.reactor({firstname:"joe"}),
	 model2 = tlx.reactor({myvar:"TemplateContentVariableValue"}),
		url = new URL("./template.html",window.location.href),
	missing = new URL("./missing.html",window.location.href);


tlx.view(document.getElementById("name"),{model,linkModel:true});

tlx.view(document.getElementById("test1"),{model:model2,linkModel:true});

tlx.view(document.getElementById("message"),{model,template:url.href});
tlx.view(document.getElementById("fail"),{model,template:missing.href});


//tlx.view(document.getElementsByClassName("test1"),{model:model2,linkModel:true});
//tlx.view(document.getElementById("test2"),{model:model2,linkModel:true});
</script>
</body>
</html>

pwFoo · 2019-05-23T06:25:54Z

Hi @anywhichway, the html code of your example isn't displayed as source I think? Could you edit your post to show the html full source which should work?

So nested models down't work? Or remote template (elements) inside of a model?

Another question about multiple models and performance.
Is it better to work with different / many models or just one (big) / few models and variable updates?

anywhichway · 2019-05-25T12:04:42Z

@pwFoo Nested remote templates don't work. Never tested it. Will review code to see if it is possible to get working.

Better to use one model. Updates are only driven by the changes to specific properties on the model, so no more overhead than multiple models and easier to manage. That being said, if the domain warrants multiple models, using them is fine.

pwFoo · 2019-05-25T18:10:03Z

Ok, thanks! Good to know.

But username worked in remote template in my test. Just the second model wasn't replaced. I'll try it again, but haven't much time the next days. Would be nice to have it working in remote templates to update parts of the site.

pwFoo · 2019-06-06T11:38:57Z

t-content works fine with remote templates with my example and first model! Think it was a problem with the second model.

template:

<div style="border: 1px solid green">
    <div id="remotetemplate1">This is template.html file content</div>
    <hr />
    <div>Is name replaced here (inline variable)? "${firstname}"</div>
    <hr />
    <div>Variable replacement tested with "t-content" attribute:</div>
    <div t-content="${firstname}"></div>
</div>

Result:

Green border shows the content of rendered remote template with replaced variables. Output around comes from the loaded page itself with the model and tlx.

If I update firstname from developer tools all fields update as should. locale and remote loaded template contents.

pwFoo · 2019-06-06T11:39:29Z

It worked fine after I removed the second model!

pwFoo · 2019-06-06T11:42:12Z

Special case... if "initial content" (innerHtml of a html element) is set and a t-content attribute is added too. Would it possible to keep initial innerHtml content until t-content is NOT empty?

anywhichway · 2019-06-08T10:53:17Z

@pwFoo version 1.0.43 has been pushed. If the value of t-content is null or undefined then the original content will remain. If the value of t-content is anything else, including the empty string, the original content will be replaced.

anywhichway self-assigned this May 19, 2019

anywhichway added the bug label May 19, 2019

anywhichway added enhancement and removed bug labels May 25, 2019

anywhichway closed this as completed Jun 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try to bind a variable to t-content? #17

Try to bind a variable to t-content? #17

pwFoo commented May 18, 2019

pwFoo commented May 18, 2019

anywhichway commented May 18, 2019

pwFoo commented May 18, 2019

pwFoo commented May 18, 2019

pwFoo commented May 18, 2019

anywhichway commented May 19, 2019

anywhichway commented May 23, 2019 •

edited

pwFoo commented May 23, 2019

anywhichway commented May 25, 2019

pwFoo commented May 25, 2019

pwFoo commented Jun 6, 2019

pwFoo commented Jun 6, 2019

pwFoo commented Jun 6, 2019

anywhichway commented Jun 8, 2019

Try to bind a variable to t-content? #17

Try to bind a variable to t-content? #17

Comments

pwFoo commented May 18, 2019

pwFoo commented May 18, 2019

anywhichway commented May 18, 2019

pwFoo commented May 18, 2019

pwFoo commented May 18, 2019

pwFoo commented May 18, 2019

anywhichway commented May 19, 2019

anywhichway commented May 23, 2019 • edited

pwFoo commented May 23, 2019

anywhichway commented May 25, 2019

pwFoo commented May 25, 2019

pwFoo commented Jun 6, 2019

pwFoo commented Jun 6, 2019

pwFoo commented Jun 6, 2019

anywhichway commented Jun 8, 2019

anywhichway commented May 23, 2019 •

edited