Passing parameter menggunakan onclick atau klik mengikat dengan KnockoutJS

Saya memiliki fungsi ini:

function make(place)
{
  place.innerHTML = "somthing"
}

Aku digunakan untuk melakukan hal ini dengan polos JavaScript dan html:

<button onclick="make(this.parent)">click me</button>

Bagaimana saya bisa melakukan ini menggunakan idiomatik knockout.js?

Jeroen
Pertanyaan edit 14 Maret 2016 в 6:45
Pemrograman
javascript html onclick knockout.js
6 April 2012 в 4:56
Belum ada tampilan

Penggunaan yang mengikat, seperti dalam contoh ini:

<a href="#new-search" data-bind="click:SearchManager.bind($data,'1')">
  Search Manager
</a>
var ViewModelStructure = function () {
    var self = this;
    this.SearchManager = function (search) {
        console.log(search);
    };
}();
Juliano Sales
Jawaban edit 14 Maret 2016 в 7:02
Komentar (5)
Larutan

Jika anda mengatur klik mengikat di Babak acara dilewatkan sebagai parameter kedua. Anda dapat menggunakan acara tersebut untuk memperoleh unsur yang terjadi dan melakukan tindakan apapun yang anda inginkan.

Berikut ini adalah biola yang menunjukkan: http://jsfiddle.net/jearles/xSKyR/

Alternatif lain, anda bisa membuat kustom anda sendiri yang mengikat, yang akan menerima unsur ini terikat sebagai parameter pertama. Di init anda bisa pasang anda sendiri klik event handler untuk melakukan setiap tindakan yang anda inginkan.

http://knockoutjs.com/documentation/custom-bindings.html

HTML

<div>
    Click Me!
</div>

Js

var ViewModel = function() {
    var self = this;
    self.clickMe = function(data,event) {

      var target = event.target || event.srcElement;

      if (target.nodeType == 3) // defeat Safari bug
        target = target.parentNode;

      target.parentNode.innerHTML = "something";
    }
}

ko.applyBindings(new ViewModel());
Blake Adams
Jawaban edit 7 April 2016 в 6:26
Komentar (0)

Saya tahu ini adalah pertanyaan lama, tapi di sini adalah kontribusi saya. Bukannya semua trik ini, anda hanya bisa hanya membungkus sebuah fungsi dalam fungsi yang lain. Seperti yang telah saya lakukan di sini:

<div data-bind="click: function(){ f('hello parameter'); }">Click me once</div>
<div data-bind="click: function(){ f('no no parameter'); }">Click me twice</div>

var VM = function(){
   this.f = function(param){
     console.log(param);
   }
}
ko.applyBindings(new VM());

Dan berikut adalah [biola][1]

Komentar (3)

Generik jawaban tentang bagaimana untuk menangani klik peristiwa dengan KnockoutJS...

Tidak langsung menjawab pertanyaan yang diajukan, tapi mungkin jawaban untuk pertanyaan yang paling Googlers mendarat di sini: gunakan klik mengikat dari KnockoutJS bukan onclick. Seperti ini:

function Item(parent, txt) {
  var self = this;

  self.doStuff = function(data, event) {
    console.log(data, event);
    parent.log(parent.log() + "\n  data = " + ko.toJSON(data));
  };

  self.doOtherStuff = function(customParam, data, event) {
    console.log(data, event);
    parent.log(parent.log() + "\n  data = " + ko.toJSON(data) + ", customParam = " + customParam);
  };

  self.txt = ko.observable(txt);
}

function RootVm(items) {
  var self = this;

  self.doParentStuff = function(data, event) {
    console.log(data, event);
    self.log(self.log() + "\n  data = " + ko.toJSON(data));
  };

  self.items = ko.observableArray([
    new Item(self, "John Doe"),
    new Item(self, "Marcus Aurelius")
  ]);
  self.log = ko.observable("Started logging...");
}

ko.applyBindings(new RootVm());
.parent { background: rgba(150, 150, 200, 0.5); padding: 2px; margin: 5px; }
button { margin: 2px 0; font-family: consolas; font-size: 11px; }
pre { background: #eee; border: 1px solid #ccc; padding: 5px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<div data-bind="foreach: items">
  <div class="parent">
    <span data-bind="text: txt"></span><br>
    click: doStuff<br>
    click: $parent.doParentStuff<br>
    click: $root.doParentStuff<br>
    click: function(data, event) { $parent.log($parent.log() + '\n  data = ' + ko.toJSON(data)); }<br>
    click: doOtherStuff.bind($data, 'test 123')<br>
    click: function(data, event) { doOtherStuff($data, 'test 123', event); }<br>
  </div>
</div>

Click log:
<pre data-bind="text: log"></pre>

*Catatan tentang aktual pertanyaan...

Pertanyaan yang sebenarnya memiliki salah satu yang menarik bit:

// Uh oh! Modifying the DOM....
place.innerHTML = "somthing"

Don't melakukan itu! Don't memodifikasi DOM seperti itu ketika menggunakan MVVM framework seperti KnockoutJS, terutama bukan bagian dari DOM yang orangtua anda sendiri. Jika anda akan melakukan ini, tombol akan hilang (jika anda mengganti orang tua's innerHTML anda sendiri akan pergi untuk selamanya pernah!).

Sebaliknya, mengubah Lihat Model anda bukan handler, dan memiliki View merespon. Misalnya:

function RootVm() {
  var self = this;
  self.buttonWasClickedOnce = ko.observable(false);
  self.toggle = function(data, event) {
    self.buttonWasClickedOnce(!self.buttonWasClickedOnce());
  };
}

ko.applyBindings(new RootVm());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<div>
  <div  data-bind="visible: !buttonWasClickedOnce()">
    Toggle!
  </div>
  <div data-bind="visible: buttonWasClickedOnce">
    Can be made visible with toggle...
    Untoggle!
  </div>
</div>
Komentar (0)

Ko's dokumentasi juga menyebutkan banyak cara yang lebih bersih dari passing parameter tambahan untuk fungsi yang terikat menggunakan di-klik mengikat menggunakan fungsi.mengikat seperti ini:


    Click me
Komentar (0)