个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我的项目使用 knockout 模板来渲染 html，所以我的 html 文件只包含一堆 knockout 语法和 javascript 函数。在浏览器中打开 html 后，它显示了人们通常会在网页上看到的常规内容。我的问题是，如何查看显示页面的 HTML 源代码？
准确的说:比如这里有一个完整的html源码，你可以测试一下:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<p>First name: <strong data-bind="text: firstName()"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
<script type="text/javascript">
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName(); //call the observable as a function with ()
}, this);
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
在结果中，我在浏览器中看到以下内容:
==========
名字:伯特
姓氏:伯廷顿
全名:伯特伯廷顿
==========
出于调试目的，我需要查看此 html 的结果 源 html。但是，如果我右键单击页面并显示源代码，我只会看到我编写的 html 代码，而不是浏览器呈现的代码。请注意，上面的示例已简化；我的实际代码非常大且复杂，我需要将结果作为 html 标记查看以进行调试。所以，我需要看到的(用于代码检查)是这样的:
<p>First name: <strong>Bert</strong></p>
<p>Last name: <strong>Bertington</strong></p>
<p>Full name: <strong>Bert Bertington</strong></p>
最佳答案
使用您的浏览器开发者工具。在 Chrome 中，这将是 F12。他们应该有一个工具可以让您检查实际呈现的 HTML。在 Chrome 中，它位于名为 Elements 的选项卡中。从那里您可以根据需要查看 HTML 展开和折叠节点。还有一个工具(放大镜)可以让您直接在屏幕上选择和元素，它会在控制台中显示相应的 HTML 位。
否则，一个简单的 document.body.innerHTML 将转储整个呈现的 HTML。您也可以从调试控制台执行此操作。
一个简单的例子，在这个 fiddle 中，使用 Chrome(其他浏览器具有类似的功能):
<!-- Original -->
<div data-bind="foreach:items">
<div data-bind="text:$data"></div>
</div>
<!-- Rendered -->
<div data-bind="foreach:items">
<div data-bind="text:$data">one</div>
<div data-bind="text:$data">two</div>
<div data-bind="text:$data">tree</div>
</div>现在如果你想要一个“干净”的非实时版本的呈现文本(不会被数据绑定(bind)的)，那么你应该能够将 html 复制到一个新元素并删除 data-bind 属性.例如，使用 jQuery(尽管毫无疑问可以使用 vanilla JS 完成):
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName(); //call the observable as a function with ()
}, this);
}
ko.applyBindings(new AppViewModel());
var s = $("#source").html();
var t = $("#target");
t.html(s);
t.find("[data-bind]").removeAttr("data-bind");
$("#html").text(t.html());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Original data-bound</h4>
<div id="source">
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
</div>
<hr/>
<h4>Non-live rendered copy</h4>
<div id="target">
</div>
<hr/>
<h4>Raw rendered HTML</h4>
<div id="html">
</div>请注意，这并不是万无一失的，因为它不会找到不在数据绑定(bind)属性中的 knockout 位。例如，如果我使用 <!-- ko foreach:items -->。
关于javascript - Knockout.js - 如何查看生成的 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32660275/
24
4
0
我想认真学习更多关于 ES6 的知识。我一直在网上做一些例子，虽然我得到了大部分例子，但有时我什至不知道从哪里开始。请注意，我对这个 ES6 和 Knockout 的东西 super 菜鸟，想通过从他
我正在使用 knockout.mapping 将我的 javascript 对象转换为可观察到的 knockout 。在这个 javascript 对象内部是一个嵌套对象，并且这个嵌套对象正在被转换，
我正在用 Kendo、Knockout 和 kendo-knockoutjs 库做一些实验。我想将 knockout View 模型与剑道数据源一起使用，并将其绑定(bind)到剑道网格小部件。 在剑
有谁知道现在当 jQuery.tmpl is not being actively developed or maintained anymore 时 Knockout 的默认模板引擎会发生什么？ K
我面临一个问题，即添加新项目时计算的可观察数组未更新。 self.FilteredCityList = ko.computed(function() { var filteredCollectio
我想对数组中的多个属性使用 this fiddle 中的 ko.utils.arrayGetDistinctValues，因此我将数组映射到我想要的两个属性的数组 viewModel.justCate
我在使用 Knockout 的映射插件时遇到了一个奇怪的问题。 如果我通过映射填充一个 observable 数组，我将无法迭代该数组或获取其长度，即使 UI 已正确更新，该数组似乎也是空的。 你可以
所以我试图让 knockout 与 summernote 打得很好。它并没有真正起作用。我意识到这是因为 Summernote 使用了 而不仅仅是一个输入字段。 我的绑定(bind)是这样的: ko.
另一个我似乎无法找到帮助的 knockout 问题。 我基本上是在尝试实现级联下拉列表。前几天我请求帮助了解如何解析我的复杂 JSON(它来自 cakePHP Controller 。前几天我收到的帮
我在尝试使用映射插件将项目更新为 observableArray 的一部分时遇到问题。 我有以下代码 accounts.list = ko.mapping.fromJS(@(Html.Raw(Mode
有几件事我不明白。 根据 KO 文档(以及关于 SO 的许多帖子)，在查询和编写 observable 时应该使用括号。但是在绑定(bind)子属性时，在我看来，是否使用括号并不重要。 = 都返回
我从 WCF 接收数据并将其绑定(bind)到表。我在这个论坛上得到了帮助，添加了一些计算字段，一切都很完美。我想在此表的页脚添加总计。我的页面的简单版本可以在 http://jsfiddle.net
我有一个使用 Knockout 显示过滤列表的页面。 View 模型有一个对象数组，以及一个使用 ko.utils.arrayFilter 来过滤数组的 ko.computed。 有时过滤会变得非常复
我正在使用 jquery quicksearch 来搜索由 knockout foreach 循环填充的表。 需要启动快速搜索元素 foreach 结束后 . 我尝试了几种方法，但到目前为止都没有成功
我正在尝试使用类似于 silverlight 中的数据表单的数据网格来创建数据表单功能。 我有一个 div 来显示从网格中选择的项目: $('#readDate').attr('data-bind',
我有一个带有分页功能的 View 模型，它维护 pageIndex 属性。 Viewmodel 有一个包含页面的页面数组。每个页面都有自己的 pageNumber 属性。 我的 View 模型的分页代
名称+复选框的单向绑定(bind)工作正常，但它最初不适用于单选按钮employeeTypeA，尽管它在viewmodel中的值为true，html显示单选按钮未设置，为什么会这样？
我正在尝试解决ko映射的一个小问题。场景是我的ViewModel基本上是对象的集合。每个对象都是通过json调用创建的，方法是: var ViewModel = ko.observableArray(
使用 computed 的主要区别是什么？函数和 subscribe在knockout.js 中的功能？ 最佳答案 计算出的 observable 通常用于返回计算出的值。作为计算评估的一部分访问的任
我有带有项目验证的ko.observableArrays。用户可以将项目标记为已删除。将其标记为已删除时，我需要在该项目上禁用验证。 您如何动态禁用验证？ 示例:http://jsfiddle.net
我是一名优秀的程序员,十分优秀！