2016-08-16 6 views
1

Ich möchte einen Wert an die aufgerufene Funktion senden, wenn der Benutzer auf eine Schaltfläche klickt. HierSo senden Sie Parameter an ein Klickbindungs-Knockout

ist die Ansicht Modell,

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

Hier wird die HTML-Seite ist,

<!-- 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 --> 

Ich mag den $ data.id erhalten, wenn der Benutzer auf die Schaltfläche klicken. Ich habe versucht, removeUser.bind ($ data, $ data.id), aber es gibt einen Fehler. removeUser ist nicht definiert.

Antwort

1

Sie erhalten den removeUser ist nicht definiert, weil es im übergeordneten Modell ist, versuchen Sie also $parent.removeUser. Wenn Sie nur das ausgewählte Element aus dem Array entfernen möchten. Dann versuchen Sie einfach wie folgt

<!-- 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 --> 

und im Modell

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

Können Sie erklären, mehr über $ root, $ parent, $ data? – JMA

+0

@JohnArellano Es gibt eine gute Menge an Dokumentation im folgenden Link http://knockoutjs.com/documentation/binding-context.html – Ramki

Verwandte Themen