Knockout JS: Dynamic tabs with dynamic content

277 views
Skip to first unread message

kaka

unread,
Mar 30, 2018, 2:18:28 PM3/30/18
to KnockoutJS

Requirement:

On my html side I have 2 tables containing data whose data can be dynamic. Users can press save to save the data to the db. This all has been setup and works fine. Now as an additional requirement this all html data needs to be moved into tabs. There is a button on click of which another tab needs to be created with the same content. Clicking again the same tab creates another tab with the content.

I havent used tabs and templates before so not sure how to handle this dynamic content. I tried to move my existing code which was working into tabs. It creates tab but my content inside the tab now doesnt works. Currently I have set it up for static tabs. But I am looking to create dynamic tabs and data on button click.

Here is the same jsfiddle which I was able to setup: http://jsfiddle.net/aman1981/p7fu8pmm/13/

Below is the sample code for my tabs:

<div id="tabs" data-bind="foreach: tabs">
  <div class="tab" data-bind="css: {selected: $parent.selectedTab() == id()}, 
text: name, click: $parent.selectedTab.bind($parent, id())"></div>
</div>


Could someone work on my jsfiddle and help me get started.

Gunnar Liljas

unread,
Mar 30, 2018, 5:38:42 PM3/30/18
to knock...@googlegroups.com
What is the the purpose of the tabs, or rather, what is the relationship between the tabs and the items?

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

kaka

unread,
Apr 2, 2018, 1:04:00 PM4/2/18
to KnockoutJS
The items are an template. So everytime a new tab is created new copy of items would be created

Users can save data on tab 1. Create another tab, have different data on tab 2 and save etc

Gunnar Liljas

unread,
Apr 3, 2018, 8:07:21 PM4/3/18
to knock...@googlegroups.com
If the data belongs to the tab, so does its place in the code.


--
Reply all
Reply to author
Forward
0 new messages