web-dev-qa-db-de.com

Knockout-Klickbindung mit Parametern

Ich versuche, meiner Schaltfläche ein Klickereignis hinzuzufügen, das die ID, Kategorie und den Namen nur dann als Parameter sendet, wenn auf die Schaltfläche geklickt wird.

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

auch wenn ich versuche zu ändern:

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

mit

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

die Methode getLast7 wird immer noch so oft ausgelöst, wie die Länge von tehTab.

Was mache ich falsch?

javascriptjqueryknockout.js
5
Dana

Das Hinzufügen von () nach dem Funktionsnamen wird es aufrufen. Du musst .bind benutzen

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

Probe

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

Obwohl Sie dies mit einem bindin Ihrer Klickbindung beheben können, halte ich dies nicht für die beste Lösung.

Die Bindung clickübergibt das angeklickte Modell an den Listener standardmäßig . Binden erstellt für jedes Element eine neue Funktion und verschiebt die Logik in Ihre Ansichten.

Hier ist ein Beispiel:

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>

Erstellen Sie eine zusätzliche Funktion onClickname__, wenn Sie Eigenschaften in eine Argumentliste extrahieren müssen:

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

Sie können den Click-Handler (in Ihrem Fall getLast7) auch einfach in eine Funktion einbinden. Sie können dann einen beliebigen Parameter angeben. Eigenschaften aus $ data, benutzerdefinierten Werten oder sogar Eigenschaften aus verschiedenen Kontexten:

ko.applyBindings({
  container: {
    containerId: 42,
    items: [{
      id: 1,
      category: 'item category',
      name: 'item name',
      log: function(id, category, name, custom, containerId) {
        console.log(`id: ${id}, category: ${category}, name: ${name}, custom text: ${custom} containerId: ${containerId}`);
      }
    }]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="with: container">
  <div data-bind="foreach: items">
    <button type="button" data-bind="click: function() { log($data.id, $data.category, $data.name, 'custom text', $parent.containerId); }">Click me</button>
  </div>
</div>
0
Philip Bijker

Ich benutze das immer und funktioniert gut.

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 
        }

Ich hoffe, es hilft.

0
Fabio Silva Lima

Verwenden Sie für die Klickbindung in einer Schleife this , um die Werte des Eintrags in der aktuellen Zeile abzurufen.

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

Rufen Sie im Knockout-Skript aktuelle Zeileneinträge mit diesem Schlüsselwort ab

  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