0

如果绑定，我遇到了 knockoutjs 的问题。我非常自由地使用绑定，因为它允许我在绑定中引用子属性而不会出错。

引起关注的一个原因是在 if 绑定添加的 DOM 元素上注册事件处理程序等。基本上，当 if 绑定添加的元素添加到 DOM 时，我需要获取回调。我曾尝试使用 livequery jquery 插件，但似乎元素被添加了两次。我想出了一些示例代码来展示这一点。

淘汰赛文档明确指出：

“然而，if 绑定在物理上添加或删除 DOM 中包含的标记，并且仅在表达式为真时才将绑定应用于后代。”

http://knockoutjs.com/documentation/if-binding.html

但是在下面的代码中，内联脚本中的警报被执行：

JS：

var vm = {
    val: ko.observable(false),
    someText: ko.observable("some text"),
};

ko.applyBindings(vm, document.getElementById("d1")

HTML：

<div id="d1" data-bind="if: val">
   <span data-bind="text: someText"></span>
   <script>alert("here")</script>
</div>​
4

2 回答 2

4

你基本上已经用这句话回答了你自己的问题：

“然而，if 绑定在物理上添加或删除 DOM 中包含的标记，并且仅在表达式为真时才将绑定应用于后代。”

虽然这句话清楚地表明了绑定的行为，但它并没有说明任何关于其他 JavaScript 或浏览器功能的内容。这是非常有意义的，因为 Knockout 的域是它的绑定，没有别的。在加载 Knockout 时，您的浏览器将已经执行了该警报语句。每次 Knockout 将它添加回 DOM 树时，它都会执行该警报语句。

将<script>此类元素与 Knockout 结合使用是不好的做法，并且可能导致不可预测的行为。您要做的是在 Knockout 的域中表达预期的行为，这是它的绑定。在您的情况下，这将适合afterRender绑定：

<div id="d1" data-bind="if: val">
   <span data-bind="text: someText, afterRender: alert('here')"></span>
</div>​

如果val是，则呈现true内部<span>并且afterRender事件将触发。

如果val是false，则内部<span>将不会被渲染并且afterRender事件不会触发。

于 2012-08-22T20:30:47.040 回答
1

好的，我知道我需要做什么。显然，“if”绑定实际上是模板绑定的原生/简化扩展：

http://knockoutjs.com/documentation/template-binding.html

模板绑定还具有 afterRender 选项，您可以传递一个函数，该函数将在整个模板添加到 DOM 后执行。

我的代码现在看起来像这样：

<div data-bind="template: {if: val, afterRender: func}">

笔记：

这也可以使用“with”绑定，当然还有“foreach”绑定。

于 2012-08-22T22:21:49.437 回答