淘汰赛数据绑定属性，动态地添加不触发单击事件处理程序

在我的视图模型的viewAttached事件中，我创建一个动态锚元素如下：淘汰赛数据绑定属性，动态地添加不触发单击事件处理程序

qaItemLink = document.createElement("a"); 
$(qaItemLink).attr({ 'class': 'qaTreeItem', 'href': '#', 'data-bind': 'click:$root.showQaItemDetails' });

这在UI检查时呈现为如下：

<a class="qaTreeItem" href="#" data-bind="click:$root.showQaItemDetails">Item 1</a>

我在正在呈现的锚标记中看不到任何问题。可能是showQaItemDetails函数没有被调用的原因是什么？

来源

2014-03-04 user2585299

模板都在你面前或应用绑定后创建这些锚标记？ – Dan

如果在调用ko.applyBindings之后添加元素，则Knockout将没有机会绑定它。如果您使用template绑定（或with,foreach等）添加动态内容，则Knockout会为您处理此问题。这通常是最好的方法。

对于您的情况，如果可能的话，您可以等待直到添加内容为止，请致电ko.applyBindings。

您也可以通过调用ko.applyBindings(viewModel, element)直接绑定元素。这将绑定元素及其子元素。但是，我不知道你的情况下你的锚需要绑定什么上下文（根对比一些嵌套的项目）。

也可以使用ko.applyBindingsToNode（或3.0 ko.applyBindingAccessorsToNode传递一个返回函数的结合）直接申请一个样结合：

ko.applyBindingsToNode(qaItemLink, { click: viewModel.showQaItemDetails }, optionalContext);

来源

2014-03-04 22:54:42

ko.applyBindingsToNode方法适用于我。而不是调用这个方法，另一种可以让点击事件处理程序触发的方式是使用jQuery（使用“.on”作为jQuery（document.body）.on（'click'，'.qaTreeItem'，function（event） {}）;你认为使用jQuery比显式使用ko.applyBindingsToNode更好吗？ – user2585299

一个奇怪的观察。当我执行ko.applyBindingsToNode（qaItemLink，{click：vm.showQaItemDetails（1），text：qaItem}）;通过参数传递，然后该方法不会被点击触发。 – user2585299

您需要传递函数引用本身，而不是使用参数执行函数。你可以使用jQuery来处理这个点击。此页面上的示例很有用：http://knockoutjs.com/documentation/unobtrusive-event-handling.html –

我不知道很多关于迪朗达尔，所以这可能离开基地......但最好的淘汰赛方法是避免在视图模型中使用jQuery，而是编写基本模板或数据绑定来完成dom操作。如果由于某种原因无法使用淘汰赛模板，rp-niemeyer就会出现。我为你做了一个人为的例子。

function MapItem(item) { 
    item.Name = ko.observable(item.Name); 
} 
function viewmodel(serverItems) { 
    var self = this; 
    self.Items = ko.observableArray(ko.utils.arrayMap(serverItems,MapItem)) 
    self.SelectedItem = ko.observable(null) 
    self.SelectItem = function(item) { 
     self.SelectedItem(item); 
    } 

}

像这样

<div class="view"> 
    <ul data-bind="foreach:Items"> 
     <li><a href="#" data-bind="text:Name,click:$root.SelectItem"></a></li> 
    </ul> 
    <div class="SelectedItemContainer" > 
     <p data-bind="visible:SelectedItem() == null">Select an item from the list</p> 
     <div class="SelectedItem" data-bind="with:SelectedItem"> 
      <h1 data-bind="text:Name"></h1> 
      <input type="text" data-bind="value:Name" /> 
     </div> 
    </div> 
</div>

来源

2014-03-05 05:02:46 scaryman

淘汰赛数据绑定属性，动态地添加不触发单击事件处理程序

回答

相关问题