基本概念
>
>一个符合您应用程序数据的模型。这可以由用户输入的数据或从Web服务器获取的JSON数据。>
>作为模型和视图之间的连接器和通信层的视图。它拥有数据和操作来操纵此数据并将其显示在UI中。每次更改数据模型时，相应的UI零件更新，反映这些更改。您应用程序中的查看模型由JavaScript代码表示。a的视图，指的是您应用程序中的所有UI元素。它是给定UI的结构和外观的表示。该视图负责显示数据并接受用户输入。视图由您的应用程序中的HTML/CSS代码表示。
>
>它们是建立敲除时的三个核心概念：1。声明性绑定：这些允许您以简单便捷的方式将UI的一部分连接到数据模型。当直接使用JavaScript操纵DOM时，如果以后更改DOM层次结构或元素ID，可能会导致损坏的代码。即使您更改DOM所有绑定的零件，也可以使用声明性绑定。您可以通过简单地将数据绑定属性包含到任何DOM元素来将数据绑定到DOM。
2。依赖关系跟踪：值得庆幸的是，每当您的模型数据更改与其自动更新的所有零件时，每次更改模型数据时，可观察到的变量和特殊类型的变量。无需担心添加活动处理程序和听众。所有这些额外的工作都是通过敲除和可观察到的内部执行的，这些工作在基本值发生了变化时通知听众。
>3。模板：当您的应用程序变得更加复杂并且需要一种显示丰富的视图模型数据结构，从而使代码保持简单时，这很方便。淘汰赛具有本机内置的模板引擎，您可以立即使用。但是，如果需要，也可以使用第三方模板引擎，例如jquery.tmpl或下划线。
>不用担心，如果您听起来所有这些理论对您来说都是晦涩的。当我们浏览教程并示例代码时，一切都会变得更清晰。>
入门>在我们深入淘汰之前，您需要在HTML文档中下载和引用库。
<script type='text/javascript' src='knockout-2.0.0.js'></script>
>将代码与演示文稿分开，最好创建一个JavaScript文件来保存所有应用程序代码。而且，由于我们在某些情况下也需要使用jQuery。
<script type='text/javascript' src='knockout-2.0.0.js'></script>
现在，要创建一个视图模型，只需声明任何类似的JavaScript对象：
>>数据结合属性（稍后解释）不是HTML的本地，并且浏览器不知道它的含义。因此，必须通过在脚本末尾插入ko.applybindings（）函数来激活敲除。另外，如果您使用外部JavaScript文件或将脚本放置在文档的Head标签中，则需要将敲除代码包裹在jQuery就绪功能中，以便正常工作。这是要启动的基本模板：
function viewModel() {
// Your code here
};>调用ko..applybindings（）方法并传递我们的视图模型，告诉淘汰赛将指定的模型绑定到我们的UI。如果您只想将此视图模型绑定到整体UI的一部分，则甚至可以提供DOM元素。 ko.applybindings（）采用两个参数。第一个参数说明您要使用的声明绑定要使用的视图模型对象。第二个参数是可选的，它定义了您要搜索数据重点属性的文档的哪一部分。例如，ko.applybindings（viewModel，document.getElementById（'container'））将使用ID容器及其后代将激活限制为元素。如果您想拥有多个视图模型并将每个区域的不同区域相关联，这将很有用。
$(document).ready(function(){
function viewModel() {
// Your code here
};
ko.applyBindings(new viewModel());
});它的工作原理
>那么，如果我们要使文本的价值动态更新，则必须在视图模型中将其声明为可观察的。
// syntax: data-bind="bindingName: bindingValue" <p>The day of the week is <span data-bind="text: dayOfWeek"></span>. It's time for <span data-bind="text: activity"></span></p>
这将输出“一周中的一天是星期天。是时候休息了。”
function viewModel() {
this.dayOfWeek = ko.observable('Sunday');
this.activity = ko.observable('rest');
};
ko.applyBindings(new viewModel());
可观察到
通过将对象属性与名为ko.observable（）。<script type='text/javascript' src='knockout-2.0.0.js'></script>
在某些情况下，您可能需要将两个或多个可观察到的值组合为一个新值。这可以通过所谓的计算可观察物来完成。计算的可观察物是依赖一个或多个可观察到的函数，并且每当这些依赖性变化时，都会自动更新。当它依靠其评估更改的任何可观察到的属性时，计算的属性会自动更新。在下面的示例中，计算出的可观察到的命名fulldate每天都会更新一天，月和年度可观察到。
ko.competed（）采用第二个参数。没有传递它，就不可能参考此.day.day（），this.month（）或this.year（）。为了简化事物，您可以创建一个变量自我，从而避免添加第二个参数。从现在开始，我们将在代码示例中使用此方法。
><script type='text/javascript' src='knockout-2.0.0.js'></script>
>处理一个对象时，您可以通过将其变成可观察到的任何更改来轻松跟踪其更改。但是，如果您有多个对象怎么办？在这种情况下，敲除具有一个名为ko.observablearray（）的特殊对象，可以检测并响应事物集合的变化。这使得可以显示和/或编辑多个值，例如，当您需要重复的UI部分以添加和删除项目时出现和消失时。
> function viewModel() {
// Your code here
};>
创建可观察的数组时，您可以将其留空或用一些初始值填充它。在下面的示例中，我们创建了一个可观察到的阵列，该阵列填充了一周的日子：
$(document).ready(function(){
function viewModel() {
// Your code here
};
ko.applyBindings(new viewModel());
});>有关可用功能的完整列表，您可以查看文档。如果您喜欢阅读这篇文章，您会喜欢学习的；从大师那里学习新鲜技能和技术的地方。成员可以立即访问SitePoint的所有电子书和交互式在线课程，例如Web的JavaScript编程。 经常询问的问题（常见问题解答）
junckoutjs是一个JavaScript库，可帮助开发人员创建具有干净的基础数据模型的富含，响应式显示和编辑器用户界面。与其他JavaScript库不同，QuignOuTjs使用模型视图 - 视图模型（MVVM）设计模式，其中模型引用数据，视图是数据的可视化表示，而ViewModel是模型和视图之间的中间设备。这种模式允许明确的疑虑分开，使您的代码更易于管理和测试。 nockoutjs中的可观察力是什么？可以将更改通知订阅者并自动检测依赖性的JavaScript对象。在QuignOutJs中，您使用可观察到的物品自动更新视图时，每当模型更改而无需手动操纵DOM。这使您的代码更清洁且更易于维护。 >我如何在quignOutJs中使用模板？ 我可以与其他JavaScript库一起使用nockoutjs？可以与其他JavaScript库（如jQuery或Bootstrap）一起使用。 QuintOutJS并不能直接操纵DOM，而是根据对ViewModel的更改更新视图，因此它不会干扰操纵DOM的其他库。>数据绑定在quotningjs中如何工作？一种在模型（您的数据）和视图（网页中的DOM元素）之间建立连接的方法。此连接允许您的数据更改以自动更新视图，反之亦然。 Quignoutjs为常见任务（例如文本和价值绑定）提供了几种内置绑定，您还可以为更复杂的场景创建自定义绑定。
>我如何在gockoutjs中使用计算的可观察物？
计算的可观察到的函数是依赖一个或多个其他观察值的函数，并且随时会自动更新这些依赖性中的任何一个都改变了。要创建可观察到的计算的可观察到的计算机，您可以使用ko.com的函数，传递返回计算值的函数。>
>我如何处理quignOutJs中的事件？> viewModel在junckoutjs中的作用是什么？它负责维护视图状态，处理用户操作并在必要时更新模型。 ViewModel不是数据的直接表示，而是该视图的专门版本。
>>如何调试opplug quackoutjs applications？ >可以使用浏览器的开发人员工具进行调试敲除应用程序。您可以使用ko.datafor和ko.contextfor函数检查绑定到DOM元素的数据。此外，QuignOutJs提供了ko.tojson函数，可用于将您的ViewModel转换为JSON字符串以进行易于检查。
以上是淘汰赛初学者指南：第1部分的详细内容。更多信息请关注PHP中文网其他相关文章！
