Question

修改

就目前而言，这种方法实际上并没有按预期工作。

这个问题是由于我的changeUrl方法，我修复了它，现在这个＆＃34;确实有效＆＃34;。我在引号中有它，因为我不确定是什么，并且不需要有适当的工作绑定。

这是绑定处理程序：

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>

所以通用网址是这样的：

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

网址必须如下所示：

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

我需要什么，以及我的绑定处理程序中不应该包含的内容。例如，ko.applyBindingsToNode应该在那里吗？它目前使用不正确吗？等等。

Answer 1

我发现回调原始绑定处理程序而不是使用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);
    }
};

Answer 2

在绑定处理程序中无需执行此操作。您可以使用the attr binding：文档甚至使用href作为典型示例。此外，View Model逻辑更容易进行单元测试。

例如：

＆＃13;

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());

＆＃13;

<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>

＆＃13;

Knockout绑定此函数所需的内容

2 个答案: