什么是这个功能

Question

编辑

所以，因为它代表所需的淘汰赛绑定，这种方法实际上并没有达到预期效果。

这个问题是由于我的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> 

所以通用网址是这样的：

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

和URL将需要如下所示：

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

我需要什么，什么不应该在我的绑定处理程序。例如，应该ko.applyBindingsToNode在那里吗？它目前是否被错误地使用？等等等等等。

Answer 1

有没有必要在绑定处理程序中做到这一点。您可以使用the attr binding：文档甚至使用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>

Answer 2

我觉得它更容易只是回调到原来的绑定处理程序，而不是使用ko.applyBindingsToNode和controlsDescendantBindings：真

因此，像这将是我的建议：

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