riot-js

Open full view…

render tag dynamic?

Somsak Sae-Lim
Thu, 19 Mar 2015 05:38:47 GMT

My goal is want to load dynamic content to tab content base on user selection. I not want to pre-load and hide it using if condition In Riot 2.0.11, I can do this <tab-content> <h1>Just test</h1> </tab-content> <raw> <span></span> this.innerHTML = '<tab-content></tab-content>' </raw> <my-app> <div>tab selector</div> <div><raw></raw></div> <!-- tab-content render successfully --> </my-app> But in Riot 2.0.13, I can't do this What's the solution to do this? Example for this site http://richardbondi.net/riot/ (Dynamic Input example) This is exactly that I want but in 2.0.13, it doesn't work any more.

jabez128
Thu, 19 Mar 2015 15:43:04 GMT

I think you can use `if` or `show` and `hide` to display a tag

paulwheeler
Wed, 11 Jan 2017 19:19:24 GMT

You can use "data-is" to accomplish dynamic component loading. Documentation reference is here: http://riotjs.com/guide/#loops-advanced-tips I know this is an old topic but I couldn't easily find this via a google search so posting here for posterity.

jonaspm
Sat, 21 Jan 2017 08:23:09 GMT

I managed to do that by using "data-is" <app-main> <div data-is={ currentPage }></div> <script> var self = this , r = route.create() r('', home) //r('product/*', productDetail) r('login', login) r('register', register) r(home) // `notfound` would be nicer! function home() { self.update({currentPage: 'app-page-home'}) } function login() { self.update({currentPage: 'app-page-login'}) } function register() { self.update({currentPage: 'app-page-register'}) } </script> </app-main>