Knockout绑定此函数中所需的内容

Knockout Bindings what is required in this function

本文关键字：绑定 函数 Knockout      更新时间：2023-09-26

EDIT

因此，就目前情况来看，这种方法实际上并没有像预期的那样起作用。

这个问题是由我的changeUrl方法引起的，我修复了它，现在它"确实有效"。我引用了它，因为我不确定什么是和不需要有一个适当的工作绑定。

这是绑定处理程序：

ko.bindingHandlers.formatUrl = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, context) {
        var data = valueAccessor();
        var href = appStrap.changeUrl(ko.unwrap(data.url), ko.unwrap(data.id), data.replace);
        $(element).attr("href", href);
        ko.applyBindingsToNode(element, { attr: { href:  href } }, context);
        return { controlsDescendantBindings: true };
    },
    update: function (element, valueAccessor) {
        var data = valueAccessor();
        var href = appStrap.changeUrl(ko.unwrap(data.url), ko.unwrap(data.id), data.replace);
        $(element).attr("href", href);
    }
};

以下是它的用法：

<tr>
<td><a data-bind="formatUrl: { url: $root.GenericUrl, id: id, replace: '''[ID'']' }">Details</a>
</tr>

所以通用url是这样的：

http://www.somehost.com/SomeController/SomeAction/[ID]

url需要看起来像这样：

<a href="http://www.somehost.com/SomeController/SomeAction/9fedb631-67ec-484c-9a7d-5f6bf62fb733"></a>

我需要什么，绑定处理程序中不应该有什么。例如，ko.applyBindingsToNode应该存在吗？它目前使用不正确吗？等等。

我发现只调用回原始绑定处理程序比使用ko.applyBindingsToNode和controlsDescendantBindings:true 更容易

因此，我的建议是：

ko.bindingHandlers.formatUrl = {
    changeUrl: function(data) {
          return appStrap.changeUrl(ko.unwrap(data.url), ko.unwrap(data.id), data.replace);
    },
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, context) {
        var href = ko.bindingHandlers.formatUrl.changeUrl(valueAccessor());
        valueAccessor = function(){
            return { href: href };  
        }
        return ko.bindingHandlers.attr.init(element, valueAccessor, allBindingsAccessor, viewModel, context);
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
        var href = ko.bindingHandlers.formatUrl.changeUrl(valueAccessor());
        valueAccessor = function(){
            return { href: href };  
        }
        return ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor, viewModel, context);
    }
};

在绑定处理程序中不需要这样做。您可以只使用attr绑定：文档甚至使用href作为典型示例。此外，视图模型逻辑更容易进行单元测试。

例如：

var Item = function(urlProvider, id, name) {
    var self = this;
    self.id = ko.observable(id);
    self.name = ko.observable(name);
    self.url = ko.computed(function() {
        return urlProvider.GenericUrl.replace("[ID]", self.id());
    });
};
var RootViewModel = function() {
    var self = this;
    self.GenericUrl = "http://test/controller/action/[ID]";
    self.Item = new Item(self, 42, "Something something");
};
ko.applyBindings(new RootViewModel());
<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>
<table data-bind="with: Item">
    <tr>
        <td><a data-bind="attr: { href: url }">Details</a></td>
    </tr>
</table>

相关文章：