CODEWITHSUNDEEP
javascriptknockout.js
JMA
JMA

Reputation: 994

How to send parameter to a click binding knockout

I want to send a value to the function called when the user click a button.

Here is the view model,

define(["knockout", "text!./index.html", "../../components/users/users"], function (ko, indexTemplate, userModel) {
function indexViewModel(params) {
    var self = this;
    var id = 1;
    self.users = ko.observableArray([]);
    $.ajax({
        url: 'server/getUsers.php',
        type: 'post',
        data: {"data":id},
        success: function (result) {
            var row = JSON.parse(result)
            for(var i=0;i<row.length;i++){
                self.users.push(new userModel.userModel(row[i]["name"],row[i]["time"],row[i]["id"]));
            }
        }
    });
    self.removeUser = function (user) {
       alert(user);
    };
    return self;
    }
return { viewModel: indexViewModel, template: indexTemplate };
});

Here is the html page,

<!-- ko foreach: users -->
<div class="col-md-3 col-sm-6">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="" style="height:180px;"></div>
        </div>
        <div class="panel-footer">
            <button class="btn btn-danger" data-bind="click: removeUser.bind($data,$data.id)">Remove</button>
        </div>
    </div>
</div>
<!-- /ko -->

I want to get the $data.id when the user click the button. I tried removeUser.bind($data,$data.id) but there is an error. removeUser is not defined.

Upvotes: 1

Views: 239

Answers (1)

Ramki
Ramki

Reputation: 381

You are getting the removeUser is not defined because it is in the parent model, so try $parent.removeUser. If all you want is to remove the selected item from array. Then just try as follows

<!-- ko foreach: users -->
<div class="col-md-3 col-sm-6">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="" style="height:180px;"></div>
        </div>
        <div class="panel-footer">
            <button class="btn btn-danger" data-bind="click: $parent.removeUser">Remove</button>
        </div>
    </div>
</div>
<!-- /ko -->

and in the model

define(["knockout", "text!./index.html", "../../components/users/users"], function (ko, indexTemplate, userModel) {
function indexViewModel(params) {
    var self = this;
    var id = 1;
    self.users = ko.observableArray([]);
    $.ajax({
        url: 'server/getUsers.php',
        type: 'post',
        data: {"data":id},
        success: function (result) {
            var row = JSON.parse(result)
            for(var i=0;i<row.length;i++){
                self.users.push(new userModel.userModel(row[i]["name"],row[i]["time"],row[i]["id"]));
            }
        }
    });
    self.removeUser = function () {
  self.users.remove(this);
    };
    return self;
    }
return { viewModel: indexViewModel, template: indexTemplate };
});

Upvotes: 1

Related Questions