Tôi liên tục gặp vấn đề với việc gỡ lỗi trong các mẫu KnockoutJS.
Nói rằng tôi muốn liên kết với một thuộc tính có tên " items" nhưng trong mẫu tôi tạo lỗi chính tả và liên kết với thuộc tính (không tồn tại) " item".
Sử dụng trình gỡ lỗi Chrome chỉ cho tôi biết:
"item" is not defined.
Có công cụ, kỹ thuật hoặc phong cách mã hóa nào giúp tôi có thêm thông tin về vấn đề ràng buộc không?
Câu trả lời:
Một điều mà tôi làm khá thường xuyên khi có vấn đề với dữ liệu nào có sẵn ở một phạm vi nhất định là thay thế mẫu / phần bằng một cái gì đó như:
<div data-bind="text: ko.toJSON($data)"></div>Hoặc, nếu bạn muốn một phiên bản dễ đọc hơn một chút:
<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>Điều này sẽ phun ra dữ liệu bị ràng buộc ở phạm vi đó và cho phép bạn chắc chắn rằng bạn đang lồng mọi thứ một cách thích hợp.
Cập nhật: kể từ KO 2.1 , bạn có thể đơn giản hóa nó thành:
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>Bây giờ các đối số được truyền vào JSON.stringify.
namelà một việc làm có thể quan sát đượcname.subscribe(function(newValue) { console.log("name", newValue); });
foreachkịch bản và tôi thấy nó dễ nhìn thấy hơn trên trang trong phần đánh dấu được kết xuất có liên quan hơn là sàng lọc qua bảng điều khiển. Chỉ phụ thuộc vào tình hình. Một số suy nghĩ của tôi ở đây: knmeout.net/2013/06/ . Ngoài ra, bạn có thể muốn đăng nhập một phiên bản "sạch" trong ràng buộc của bạn như thế nào console.log(ko.toJS(valueAccessor()).
Nếu bạn đang sử dụng Chrome để phát triển, có một tiện ích mở rộng thực sự tuyệt vời (mà tôi không liên kết) được gọi là trình gỡ lỗi bối cảnh Knockoutjs hiển thị cho bạn bối cảnh ràng buộc trực tiếp trong bảng Thành phần của Công cụ dành cho nhà phát triển.
Xác định một ràng buộc một lần , ở đâu đó trong các tệp thư viện JavaScript của bạn.
ko.bindingHandlers.debug =
{
init: function(element, valueAccessor)
{
console.log( 'Knockoutbinding:' );
console.log( element );
console.log( ko.toJS(valueAccessor()) );
}
};
hơn chỉ đơn giản là sử dụng nó thích điều này:
<ul data-bind="debug: $data">Ưu điểm
Tôi tìm thấy một cái khác có thể hữu ích. Tôi đã gỡ lỗi một số ràng buộc và thử sử dụng ví dụ Ryans. Tôi đã gặp một lỗi mà JSON tìm thấy một vòng tròn.
<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>
Nhưng, sử dụng phương pháp này, thay thế giá trị liên kết dữ liệu bằng cách sau:
<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>
Bây giờ nếu tôi nhấp vào phần tử PRE trong khi mở cửa sổ gỡ lỗi chrome, tôi sẽ nhận được một cửa sổ biến phạm vi được lấp đầy độc đáo.
Tìm thấy một cách tốt hơn cho nó:
<pre data-bind="text: ko.computed(function() { debugger; })"></pre>>=biểu tượng ở góc dưới bên trái của Thanh công cụ dành cho nhà phát triển Chrome hoặc bằng cách mở tab "Bảng điều khiển" trong Thanh công cụ của nhà phát triển Chrome hoặc bằng cách nhấn Ctrl+ Shift+Jko.dataFor($0)ko.contextFor($0)
Thủ thuật này là sự kết hợp giữa tính năng $ 0- $ 4 của Chrome và các phương thức tiện ích của KnockoutJS . Nói tóm lại, Chrome nhớ mà yếu tố mà bạn đã chọn ở nhà phát triển Chrome Toolbar và phơi bày những yếu tố dưới bí danh $0, $1, $2, $3, $4. Vì vậy, khi bạn nhấp chuột phải vào một phần tử trong trình duyệt của bạn và chọn 'Kiểm tra phần tử', phần tử này tự động trở nên khả dụng dưới bí danh $0. Bạn có thể sử dụng thủ thuật này với KnockoutJS, AngularJS, jQuery hoặc bất kỳ khung JavaScript nào khác.
Mặt khác của mánh khóe là các phương thức tiện ích của KnockoutJS ko.dataFor và ko.contextFor:
ko.dataFor(element) - trả về dữ liệu có sẵn để liên kết với phần tửko.contextFor(element) - trả về toàn bộ bối cảnh ràng buộc có sẵn cho phần tử DOM.Hãy nhớ rằng, Bảng điều khiển JavaScript của Chrome là một môi trường thời gian chạy JavaScript đầy đủ chức năng. Điều này có nghĩa là bạn không bị giới hạn chỉ nhìn vào các biến. Bạn có thể lưu trữ đầu ra ko.contextForvà thao tác viewmodel trực tiếp từ bàn điều khiển. Hãy thử var root = ko.contextFor($0).$root; root.addContact();và xem những gì xảy ra :-)
Chúc mừng gỡ lỗi!
Kiểm tra một điều thực sự đơn giản tôi sử dụng:
function echo(whatever) { debugger; return whatever; }Hoặc là
function echo(whatever) { console.log(whatever); return whatever; }Sau đó, trong html, bạn đã có:
<div data-bind="text: value"></div>Chỉ cần thay thế nó bằng
<div data-bind="text: echo(value)"></div>Nâng cao hơn:
function echo(vars, member) { console.log(vars); debugger; return vars[0][member]; }
<div data-bind="text: echo([$data, $root, $parents, $parentContext], 'value')"></div>Thưởng thức :)
CẬP NHẬT
Một điều khó chịu khác là khi bạn đang cố gắng liên kết với một giá trị không xác định. Hãy tưởng tượng trong ví dụ trên rằng đối tượng dữ liệu chỉ là {} chứ không phải {value: 'some text'}. Trong trường hợp này bạn sẽ gặp rắc rối, nhưng với các tinh chỉnh sau, bạn sẽ ổn:
<div data-bind="text: $data['value']"></div> Tôi đã tạo một dự án github có tên là knockENC.js để giúp trực quan hóa các lỗi này.
https://github.com/JonKragh/knockENC
Nó làm nổi bật các lỗi liên kết và đưa ra một kết xuất của datacontext trên nút đó.
Bạn có thể chơi với một mẫu ở đây: http://htmlpreview.github.io/?https://github.com/JonKragh/knockENC/blob/master/default.htmlm
Tín dụng cho RP Niemeyer cho các mẫu mã Knockout tuyệt vời của anh ấy trên SO để đưa tôi đến điểm này.
Cách dễ nhất để xem dữ liệu nào được chuyển đến ràng buộc là thả dữ liệu vào bàn điều khiển:
<div data-bind="text: console.log($data)"></div>Knockout sẽ đánh giá giá trị cho liên kết văn bản ( thực tế mọi ràng buộc có thể được sử dụng ở đây ) và chuyển dữ liệu $ vào bảng điều khiển trình duyệt.
Tất cả các câu trả lời khác sẽ hoạt động tốt, tôi chỉ thêm những gì tôi muốn làm:
Theo quan điểm của bạn (giả sử bạn đã ràng buộc ViewModel):
<div data-bind="debugger: $data"></div>Mã Knockout:
ko.bindingHandlers.debugger = {
init: function (element, valueAccessor) {
debugger;
}
}Điều này sẽ tạm dừng mã trong trình gỡ lỗi elementvà valueAccessor()sẽ chứa thông tin có giá trị.
Nếu bạn đang phát triển trong Visual studio và IE Tôi thích nó hơn thì data-bind="somebinding:(function(){debugger; return bindvalue; })()"tôi thích nó hơn chức năng echo vì nó sẽ đi đến tập lệnh với tất cả các ràng buộc thay vì tệp eval và bạn chỉ cần nhìn vào dữ liệu $ bối cảnh $ (tôi sử dụng cái này trong Chrome cũng vậy);