Question

例如，我们有以下代码：

   <!-- ko ifnot: product().bannerImageVideoLink -->
                <img data-bind="attr: {src: product().largeImageURLs()[0] }">
 <!-- /ko -->

有没有办法调试html中的代码，以便我可以看到内部产品（）是什么？

Answer 1

我总是使用浏览器插件，如：

安装扩展程序，浏览到您要调试应用程序的位置，在浏览器的开发工具中选择元素，并在扩展选项卡中详细查找当前状态。

Answer 2

ko.toJSON怎么样

来自http://knockoutjs.com/documentation/json-data.html

请注意，ko.toJSON接受与JSON.stringify相同的参数。对于例如，对视图进行“实时”表示非常有用在调试Knockout应用程序时建模数据。生成一个很好的为此目的格式化显示，您可以传递spaces参数到ko.toJSON并绑定你的视图模型，如

在

下面运行代码段

＆＃13;

var product = {
  'foo': 'bar',
  'largeImageUrls': ['image1', 'image2', 'image3', 'image4'],
  'bannerImageVideoLink': true
}


function viewModel() {
  var self = this;
  this.product = ko.observable(ko.mapping.fromJS(product));

};
var vm = new viewModel();
$(document).ready(function() {
  ko.applyBindings(vm);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>

<!-- ko ifnot: product().bannerImageVideoLink -->
<img data-bind="attr: {src: product().largeImageURLs()[0] }">
<!-- /ko -->

debugger....
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

＆＃13;

Answer 3

我这样做的方法是调用一个使用浏览器调试器的函数......

所以如果你在你的代码之前添加它......

<!-- ko if: function(){debugger;}() --><!-- /ko -->
<!-- ko ifnot: product().bannerImageVideoLink -->
  <img data-bind="attr: {src: product().largeImageURLs()[0] }">
<!-- /ko -->

...然后在打开chrome developer工具窗口的情况下运行该页面。您的浏览器将在该行上遇到断点。然后，您可以在控制台中检查$ data变量。此变量将包含由knockout绑定的数据，在本例中为knockn。

你可以通过在你的开发工具窗口打开时查看这个jsfiddle来看到这个（F12）

https://jsfiddle.net/fa3x9o2s/

如何在html中调试inline knockoutjs代码

3 个答案: