需要时 Knockoutjs 自定义绑定

Question

正在努力学习 Knockoutjs。我找到了一个 Knockoutjs 自定义绑定相关的代码，但这不是很好。

<input data-bind="value: name" />
<hr/>
<div data-bind="fadeInText: name"></div>

ko.bindingHandlers.fadeInText = {
    update: function(element, valueAccessor) {
        $(element).hide();
        ko.bindingHandlers.text.update(element, valueAccessor);
        $(element).fadeIn(); 
    } 
};

var viewModel = {
    name: ko.observable("Bob")
};

ko.applyBindings(viewModel);

我只是不明白人们何时使用自定义绑定？

1) 如果可能的话，请告诉我在什么情况下可以选择自定义绑定？

2) 如果有人看到代码，那么他们可以理解自定义绑定 fadeInText 和 viewModel 没有关系，但它仍然可以工作。怎么样？

3) 如果会有多个视图模型，那么我如何在绑定时指定视图模型名称和绑定名称？

上述代码的jsfiddle链接http://jsfiddle.net/rniemeyer/SmkpZ/

4) 如何在没有自定义绑定的情况下实现相同的输出？有可能吗？

请明智地回答我的问题。谢谢

Answer 1

这里有几个答案：

1. 自定义绑定在许多情况下都很有用，在我看来，不应将其用作最后的手段。任何时候如果您想以内置绑定尚不支持的方式连接您的 DOM 和数据，那么它们是一个不错的选择。正如我在上面列出的，here 是一篇可以帮助澄清的文章。

2. 自定义绑定通过调用ko.bindingHandlers.text.update间接与视图模型建立关系。因此，它有效地包装了实际的 text 绑定。 text 绑定读取传入的值并显示。

3. 对于多视图模型，answer 描述了处理多视图模型的一些选项。

4. 如果没有自定义绑定，您可以选择不使用 jQuery 并使用 CSS（考虑浏览器支持和前缀）。例如，您可以立即向元素添加一个类，例如：

使用 CSS 类似：

.message {
    opacity: 0;
    transition: opacity 2s ease-in;
}

.load {
    opacity: 1;
}

该元素将以 opacity: 0 开头，并在 2 秒内立即转换为 opacity: 1。

我不建议在您的视图模型中直接使用 jQuery。自定义绑定是适用于这些场景的工具，并提供了 Knockout 提供的大部分功能。

希望这会有所帮助。