How to read data on Click binding in Knockout

Question

In foreach i am binding the data as below:

<ul class="state-list" data-bind="foreach: places">
<li class="city-container" data-bind="click:currentPlace">                                
    <div>
        <img class="city-img" data-bind="attr: { src: img, alt: name }">
        <div class="city-facts">
            <em data-bind="text:name"></em>
            <!-- Not that we're not caching the stats template. This is to demonstrate passing ajax options -->
            <div data-bind="template: { name: 'stats', templateUrl: 'templates/info', ajax: { cache: false } }"></div>
        </div>
        <span style="clear:both;"></span>
    </div>
</li>
</ul>

And calling "currentPlace" on click: And in in ViewModel i have written like this:

    this.currentPlace = function(data,event){
        console.log("data=>",data);         
    }

When i am printing data it give me complete object.

Now my question is how to access that object to get my data like image, name,city etc.?

I try like data.name, data['name'] but it is not working.

EDIT As you can see i am using another template name :'stats', now if i want to read the data on it how can i do that?

The 'stats' template is below:

<ul data-bind="foreach: stats">
    <li class="stat-container" data-bind="ifnot: editing">
        <div class="stat stat-name" data-bind="text:name"></div>
        <div class="stat stat-value" data-bind="text:value, click: toggleEdit "></div>
    </li>

    <li class="stat-container" data-bind="if: editing">
        <span class="stat stat-name" data-bind="text:name"></span>
        <input class="stat stat-value"type="text" data-bind="value: value"><input type="button" value="save" data-bind="click: toggleEdit">
    </li>
</ul>

Thanks in Advance

first tell me are you getting data in function(data,event) means in "data" object,if yes than try this data.name() — Sagar Hirapara, Apr 03 '13 at 05:32
yes i am getting. and i can read the value data.name(). it works like a charm..thanks — Suresh Kamrushi, Apr 03 '13 at 05:39
@Sagarpatel, just added one query in my post,can you suggest some answer. — Suresh Kamrushi, Apr 03 '13 at 05:44
actually i can't under stand your question,what u want exactly. — Sagar Hirapara, Apr 03 '13 at 05:47
first i have one city foreach and again inside of that i have foreach for states. so how can i access the second foreach data. see — Suresh Kamrushi, Apr 03 '13 at 06:07
self.toggleEdit=function(data,event){console.log(data.name())} — Sagar Hirapara, Apr 03 '13 at 06:11
@Sagarpatel If you have an answer, post it in the form of an answer, not a comment please. — Matthew Cox, Apr 03 '13 at 06:54

Gaurav · Accepted Answer · 2013-04-03T05:36:01.280

1

Instead of :

this.currentPlace = function(data,event){
        console.log("data=>",data);         
}

try to console like this:

this.currentPlace = function(data,event){
        console.log(data);
        var name = ko.utils.unwrapObservable(data.name);
        console.log(name);
}

            Or (Even better than above)

this.currentPlace = function(){
        console.log(this);        
        var name = ko.utils.unwrapObservable(this.name);
        console.log(name);
}

edited Apr 03 '13 at 05:36

answered Apr 03 '13 at 05:29

Gaurav

8,367
14
55
90

above answer works for me. I have updated my post with one more question. if you can suggest some methods to get the data. – Suresh Kamrushi Apr 03 '13 at 05:45
can you show your ko model ? and what do you mean by `read the data on it` which data you want to read and from where ? – Gaurav Apr 03 '13 at 06:00
first i have one city foreach and again inside of that i have foreach for states. so how can i access the second foreach data. see
– Suresh Kamrushi Apr 03 '13 at 06:11

How to read data on Click binding in Knockout

1 Answers1