CODEWITHSUNDEEP
knockout.jsknockout-templating
Suresh Kamrushi
Suresh Kamrushi

Reputation: 16076

How to read data on Click binding in Knockout

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

Upvotes: -1

Views: 1743

Answers (1)

Gaurav
Gaurav

Reputation: 8487

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);
}

Upvotes: 1

Related Questions