web-dev-qa-db-fra.com

Knockout Click Binding avec des paramètres

J'essaie d'ajouter un événement de clic à mon bouton qui enverra l'identifiant, la catégorie et le nom en tant que paramètres uniquement lorsque l'utilisateur clique sur le bouton.

<tbody data-bind="foreach: tehTab()">
    <tr>
       <td data-bind="text: $data.Category"></td>
       <td data-bind="text: $data.Name"></td>
       <td>
          <button type="button" class="btn chart_btn" role="button" data-toggle="popover" data-trigger="focus" data-html="true" data-placement="right" container="body" tabindex="0" data-original-title="" title="" style="border:none; background-color:white" data-bind="attr: { id: $data.Id,'data-contentwrapper':'.chartdraw' + $data.Id},click: getLast7($data.Id, $data.Category, $data.Name) , text:$data.Value"></button>
         <div data-bind="css: 'chartdraw' + $data.Id" class="chartdrawetc" style="display:none">ASD</div>
       </td>
   </tr>
</tbody>

même si j'essaie de changer:

click: getLast7($data.Id, $data.Category, $data.Name)

avec

 attr: { id: $data.Id ,onclick: getLast7($data.Id, $data.Category, $data.Name)

il déclenche toujours la méthode getLast7 autant de fois que la longueur de tehTab. 

Qu'est-ce que je fais mal?

javascriptjqueryknockout.js
5
Dana

Ajouter () après le nom de la fonction l’appellera. Vous devrez utiliser .bind

click: getLast7.bind(this, $data.Id, $data.Category, $data.Name)

Échantillon

function vm(){
  this.notify = function(str){
    console.log(str)
  }
}

ko.applyBindings(new vm())
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<div data-bind="click: notify.bind(this, 'Hello')">Click me</div>

15
Rajesh

Même si vous pouvez résoudre ce problème avec un bind dans votre reliure clic, je ne pense pas que ce soit la meilleure solution.

La liaison click transmet le modèle cliqué à l'écouteur par défaut . Bind créera une nouvelle fonction pour chaque élément et déplacera la logique vers vos vues.

Voici un exemple:

var data = [
  { Id: 0, Category: "A", Name: "A0" },
  { Id: 1, Category: "B", Name: "B1" },
  { Id: 2, Category: "C", Name: "C2" },
  { Id: 3, Category: "D", Name: "D3" }
];

ko.applyBindings({
  data: data,
  log: function(item) {
    console.log(item);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: data">
  <li data-bind="click: $parent.log, text: Name"></li>
</ul>

Créez une fonction onClick supplémentaire si vous devez extraire des propriétés dans une liste d'arguments:

var data = [
  { Id: 0, Category: "A", Name: "A0" },
  { Id: 1, Category: "B", Name: "B1" },
  { Id: 2, Category: "C", Name: "C2" },
  { Id: 3, Category: "D", Name: "D3" }
];

var log = function(id, cat, name) {
   console.log("Item ", id, "was clicked. (name:", name, "category:", cat); 
}

ko.applyBindings({
  data: data,
  onClick: function(item) {
    log(item.Id, item.Category, item.Name);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: data">
  <li data-bind="click: $parent.onClick, text: Name"></li>
</ul>

1
user3297291

Je l'utilise toujours et fonctionne bien.

html:

<input type="button" value="click to test" data-bind="click: $root.getCompleteDetails" />

javascript:

getCompleteDetails: function (item, event) {
            // you can access all properties in item parameter 
        }

J'espère que ça aide.

0
Fabio Silva Lima

Pour relier les clics dans une boucle, utilisez this pour obtenir les valeurs d’entrée dans la ligne actuelle.

<tbody data-bind="foreach: DataList">
 <tr>
  <td><input type="label" data-bind="text: Id"></td>
  <td><input type="label" data-bind="text: Category"></td>
  <td><input type="label" data-bind="text: Name"></td>
  <td><input type="button" data-bind="click: $parent.getCompleteDetails" value="View Details"/></td>   
 </tr>
</tbody>

Dans le script Knockout, obtenez les entrées de ligne actuelles à l'aide de ce mot clé.

  self.DataList   =ko.observableArray([]); //this is used to populate the data entries.
  self.getCompleteDetails= function() {   
    alert(this.Id);
    alert(this.Category);
    alert(this.Name);
  }
0
Sachin Goyal