knockout.js access element from observablearray for a href context

Question

#scroll-wrapper { margin: 5px; max-height: 250px; overflow: auto; vertical-align: top; }

#thumbnails {
    vertical-align: top;
    padding-bottom: 10px;
    max-height: 500px;
    min-width: 100px;
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
}


.thumbnail-container {
    display: inline-block;
    position: relative;
    line-height: 5px;
    margin: 3px;
    margin-bottom: 15px !important;
}
#abc {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 200px;
}

   <form method="post">
    <div data-bind="foreach: lists" id="thumbnails">
        <div class="thumbnail-container">
            <span data-bind="text:listname"></span><br /><br /><br /><br /><br />
            <div id="abc">
                <ul class="list-group" data-bind="foreach: cardlists">
                    <li class="list-group-item">
                        <span data-bind="text: cardname"></span>

                    </li>
                </ul>
                <a href="#" data-bind="click:  $parent.showhideaddcard">Add Card</a><br />
                <div data-bind="visible: showRenderTimes">
                    <input type="text" data-bind="value: $parent.cardtext" /><br /><br /><br />
                    <input type="button" value="Add" data-bind="click: $parent.addcard" />
                    <input type="button" value="Cancel" data-bind="click: $parent.cancelcard" />
                </div>
            </div>
        </div>
    </div>
    <p>
        <span id="addVar" data-bind="click: addList">Add List</span>
    </p>

    <p class="alignRight">
        <input type="submit" value="Check">
    </p>
</form>

This is my code

 var ListModal = function(lists) {
    var self = this;
    self.cardtext = ko.observable();
    self.lists = ko.observableArray(ko.utils.arrayMap(lists, function (list) {
        return { listname: list.listname,  cardlists: ko.observableArray(list.cardlists), showRenderTimes: ko.observable(false) };
    }));


    self.addList = function() {
        self.lists.push({
            listname: "asdasdasd asdasd",
            cardlists: ko.observableArray([
                {
                    cardname: "card 1"
                },
                {
                    cardname: "card 2"
                },
                {
                    cardname: "card 3"
                }
            ]),
            showRenderTimes: false

        });
    };


    self.showhideaddcard = function (list) {           
        self.showRenderTimes(true);   // problem is here
    };       

    self.save = function ()
    {


    };
};

how to access showRenderTimes in lists observable array in showhideaddcard button context?.

Answer 1

First you need to modify the addList function and make showRenderTimes as observable object, because on the initialization of self.list you set that as observable object.

showRenderTimes: ko.observable(false)

Then this is how you pass the data to showhideaddcard function

<a href="#" data-bind="click: $parent.showhideaddcard($data())">Add Card</a><br />

You can modify the value of showRenderTimes like this

self.showhideaddcard = function (list) {           
    list.showRenderTimes(true);
};