web-dev-qa-db-ja.com

パラメータを使用したノックアウトクリックバインディング

ボタンにクリックイベントを追加しようとしています。ボタンがクリックされたときにのみ、ID、カテゴリ、名前をパラメーターとして送信します。

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

変更しようとしても：

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

と

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

getLast7メソッドをtehTabの長さと同じ回数だけ起動します。

何が悪いのですか？

javascriptjqueryknockout.js
12
Dana

関数名の後に()を追加すると、それが呼び出されます。 .bindを使用する必要があります

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

サンプル

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

クリックバインディングでbindを使用して修正できますが、これが最良の解決策だとは思いません。

clickバインディングは、クリックされたモデルをリスナーに渡しますデフォルトでは。 Bindは各アイテムに新しい関数を作成し、ロジックをビューに移動します。

次に例を示します。

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>

プロパティを引数リストに抽出する必要がある場合は、追加のonClick関数を作成します。

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

また、クリックハンドラー（この場合はgetLast7）を関数でラップすることもできます。次に、必要なパラメータを指定できます。 $ dataのプロパティ、カスタム値、または異なるコンテキストのプロパティ：

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

元のバインディング構文を保持する場合は、viewmodelの関数に関数を返させます。

ko.applyBindings({
  Id: 15,
  Value: ko.observable('Click Me!'),
  Category: 'standard category',
  getLast7: function(id, category, name){
    return function() {
      console.log("You clicked and passed in " + id + ", " + category + ", " + name);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<button data-bind="click: getLast7($data.Id, $data.Category, 'Hello World!'), text:$data.Value">
0
CodeThug

私はいつもそれを使って、うまくいきます。

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 
        }

お役に立てば幸いです。

0
Fabio Silva Lima

ループ内のクリックバインディングの場合、thisを使用して現在の行のエントリの値を取得します。

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

Knockoutスクリプトで、このキーワードを使用して現在の行エントリを取得します

  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