在页面重新加载后绑定事件，并仅使用Knockout.js、html和js创建新的html元素

Binding an event after a page reload and creating new html element using Knockout.js, HTML and JS only?

本文关键字：js html Knockout 元素 创建 新加载 加载 事件 绑定      更新时间：2023-09-26

我是淘汰库的新手，我们正在开发一款iPad web应用程序。这种情况是，当用户选中HTML页面中的复选框时，我们需要在页面中添加一个新的div，其中包含一些文本框，并在取消选中这些文本框时将其删除。

需要注意的是：新的div绑定到需要默认加载在文本框中或选择的数据。

这是一款iPad网络应用程序。它将Knockout、jQuery、JS和HTML与MVVM结合使用。

问题是，Knockout是否可以在页面加载后绑定html元素，因为自定义处理程序只在初始化期间工作/注册它们自己，是否可以使用js和html创建动态div，如果可以，那么如何将其放在两个静态div之间？

您可以在页面加载后使用ko.applyBindings（viewModel，ElementSelector）绑定元素，如下所示：

ko.applyBindings(myModel, $("#myDiv"));

然而，这不是你通常想要做的事情。在Knockout中使用If绑定要容易得多，它将动态地添加或删除页面中的子元素。

<input type="checkbox" data-bind='checked: showChild' />
<div id="container" data-bind="if: showChild">
   <!-- stuff here will only be generated if the checkbox is selected -->
</div>

如果你有多个不同的元素根据某个值显示，比如选择列表，你可以使用模板功能：

//viewmodel properties
self.Options = ko.observableArray(["Name", "Age", "Height"])
self.TemplateToUse = ko.observable() 

//html
<select data-bind="options: Options, value: TemplateToUse">
</select>
<div data-bind='template: { name: TemplateToUse }'>
   <!-- template whose name is selected value -->
</div>
//templates
<script type="text/html" id="Age">
   <span>Age</span>
</script>
<script type="text/html" id="Name">
   <span>Name</span>
</script>
<script type="text/html" id="Height">
   <span>Height</span>
</script>
相关文章：