Saya terus mengalami masalah dengan masalah debugging di templat KnockoutJS.
Katakanlah saya ingin mengikat ke properti yang disebut " items" tetapi dalam template saya membuat kesalahan ketik dan mengikat ke properti (tidak ada) " item".
Menggunakan debugger Chrome hanya memberi tahu saya:
"item" is not defined.
Apakah ada alat, teknik, atau gaya pengkodean yang membantu saya mendapatkan informasi lebih lanjut tentang masalah yang mengikat?
Jawaban:
Satu hal yang sering saya lakukan ketika ada masalah dengan data apa yang tersedia pada lingkup tertentu adalah mengganti templat / bagian dengan sesuatu seperti:
<div data-bind="text: ko.toJSON($data)"></div>Atau, jika Anda ingin versi yang sedikit lebih mudah dibaca:
<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>Ini akan memuntahkan data yang sedang terikat pada ruang lingkup itu dan membiarkan Anda memastikan bahwa Anda bersarang dengan tepat.
Pembaruan: pada KO 2.1 , Anda dapat menyederhanakannya menjadi:
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>Sekarang argumen diteruskan ke JSON.stringify.
nameadalah tindakan yang dapat diamatiname.subscribe(function(newValue) { console.log("name", newValue); });
foreachskenario dan saya merasa lebih mudah untuk melihat pada halaman dalam markup yang diberikan relevan daripada menyaring melalui konsol. Tergantung situasinya saja. Beberapa lagi pemikiran saya di sini: knockmeout.net/2013/06/… . Juga, Anda mungkin ingin mencatat versi "bersih" di binding seperti Anda console.log(ko.toJS(valueAccessor()).
Jika Anda menggunakan Chrome untuk pengembangan, ada ekstensi yang sangat bagus (yang saya tidak berafiliasi) yang disebut debugger konteks Knockoutjs yang menunjukkan kepada Anda konteks yang mengikat langsung di panel Elemen Alat Pengembang.
Tetapkan Handler handler sekali , di suatu tempat di file perpustakaan JavaScript Anda.
ko.bindingHandlers.debug =
{
init: function(element, valueAccessor)
{
console.log( 'Knockoutbinding:' );
console.log( element );
console.log( ko.toJS(valueAccessor()) );
}
};daripada hanya menggunakannya suka ini:
<ul data-bind="debug: $data">Keuntungan
Saya menemukan satu lagi yang dapat membantu. Saya sedang men-debug beberapa binding dan mencoba menggunakan contoh Ryans. Saya mendapat kesalahan bahwa JSON menemukan lingkaran lingkaran.
<ul class="list list-fix" data-bind="foreach: detailsView().tabs">
<li>
<pre data-bind="text: JSON.stringify(ko.toJS($parent), null, 2)"></pre>
<a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
</li>
</ul>Namun, menggunakan pendekatan ini menggantikan nilai data-bind dengan yang berikut:
<ul class="list list-fix" data-bind="foreach: detailsView().tabs">
<li>
<pre data-bind="text: 'click me', click: function() {debugger}"></pre>
<a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
</li>
</ul>Sekarang jika saya klik pada elemen PRE sambil membuka jendela debug krom, saya mendapatkan jendela variabel lingkup terisi dengan baik.
Menemukan cara yang lebih baik untuk itu:
<pre data-bind="text: ko.computed(function() { debugger; })"></pre>>=ikon di kiri bawah Toolbar Pengembang Chrome, atau dengan membuka tab "Konsol" di Toolbar Pengembang Chrome, atau dengan menekan Ctrl+ Shift+Jko.dataFor($0)ko.contextFor($0)
Trik ini adalah kombinasi fitur Chrome $ 0- $ 4 dan metode utilitas KnockoutJS . Singkatnya, Chrome mengingat unsur-unsur yang telah Anda pilih di Chrome Developer Toolbar dan mengekspos elemen ini di bawah alias $0, $1, $2, $3, $4. Jadi ketika Anda mengklik kanan sebuah elemen di browser Anda dan memilih 'Periksa elemen', elemen ini secara otomatis tersedia di bawah alias$0 . Anda dapat menggunakan trik ini dengan KnockoutJS, AngularJS, jQuery atau kerangka JavaScript lainnya.
Sisi lain dari trik ini adalah metode utilitas KnockoutJS yaitu ko.dataFor dan ko.contextFor:
ko.dataFor(element) - mengembalikan data yang tersedia untuk mengikat elemenko.contextFor(element) - mengembalikan seluruh konteks yang mengikat yang tersedia untuk elemen DOM.Ingat, Konsol JavaScript Chrome adalah lingkungan runtime JavaScript yang berfungsi penuh. Ini berarti Anda tidak terbatas hanya dengan melihat variabel. Anda dapat menyimpan output ko.contextFordan memanipulasi model view langsung dari konsol. Coba var root = ko.contextFor($0).$root; root.addContact();dan lihat apa yang terjadi :-)
Selamat men-debug!
Lihatlah hal yang sangat sederhana yang saya gunakan:
function echo(whatever) { debugger; return whatever; }Atau
function echo(whatever) { console.log(whatever); return whatever; }Kemudian dalam html, katakanlah, Anda memiliki:
<div data-bind="text: value"></div>Ganti saja dengan
<div data-bind="text: echo(value)"></div>Lebih maju:
function echo(vars, member) { console.log(vars); debugger; return vars[0][member]; }
<div data-bind="text: echo([$data, $root, $parents, $parentContext], 'value')"></div>Nikmati :)
MEMPERBARUI
Hal lain yang menjengkelkan adalah ketika Anda mencoba untuk mengikat ke nilai yang tidak ditentukan. Bayangkan dalam contoh di atas bahwa objek data hanya {} bukan {value: 'some text'}. Dalam hal ini Anda akan berada dalam masalah, tetapi dengan tweak berikut Anda akan baik-baik saja:
<div data-bind="text: $data['value']"></div> Saya membuat proyek github bernama knockthrough.js untuk membantu memvisualisasikan kesalahan ini.
https://github.com/JonKragh/knockthrough
Ini menyoroti kesalahan yang mengikat dan memberikan dump datacontext pada node itu.
Anda dapat bermain dengan sampel di sini: http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm
Terima kasih atas RP Niemeyer untuk sampel kode Knockout yang luar biasa pada SO untuk membawa saya ke titik ini.
Cara termudah untuk melihat data apa yang diteruskan ke pengikatan adalah dengan menjatuhkan data ke konsol:
<div data-bind="text: console.log($data)"></div>Knockout akan mengevaluasi nilai untuk pengikatan teks (pengikatan apa pun sebenarnya dapat digunakan di sini ) dan mem-flush $ data ke konsol panel browser.
Semua jawaban lain akan bekerja dengan baik, saya hanya menambahkan apa yang ingin saya lakukan:
Dalam pandangan Anda (dengan asumsi Anda sudah terikat ViewModel):
<div data-bind="debugger: $data"></div>Kode KO:
ko.bindingHandlers.debugger = {
init: function (element, valueAccessor) {
debugger;
}
}Ini akan menjeda kode dalam debugger, dan elementdan valueAccessor()akan berisi informasi berharga.
Jika Anda mengembangkan di Visual studio dan IE saya suka ini lebih data-bind="somebinding:(function(){debugger; return bindvalue; })()"saya menyukainya lebih dari itu fungsi gema karena itu akan pergi ke script dengan semua ikatan bukan file eval dan Anda bisa melihat $ konteks $ data (saya menggunakan ini di Chrome juga);