是否可以将Knockout.JS变量传递给onclick函数而无需绑定？

Question

是否可以将Knockout.JS变量传递给onclick函数，而不将函数绑定到视图模型？

下面，我试图传递用户名参数如下特定行：

<tbody data-bind="foreach: viewModel"> 
     <tr> 
      <td data-bind="text: UserId"></td> 
      <td><button onclick="alertRowName($element.UserName)"></button></td> 
     </tr> 
</tbody> 

<script> 
    function alertRowName(string){ 
    alert(string); 
    } 

//in my example the model is from a c# viewmodel.. 
viewModel = ko.mapping.fromJS(model); 
var jsModel = ko.toJS(viewModel);  
ko.applyBindings(viewModel); 

</script> 

Answer 1

你可以做这样的事情。
编辑

hmmmm ..刚注意到没有约束力。你能澄清为什么没有约束力？

var app = Window.app || {}; 
 
app.model = [{ 
 
    UserId: 1, 
 
    UserName: "User Name Here", 
 
}]; 
 

 
app.ViewModel = function ViewModel(model){ 
 
    var self = this; 
 
    self.data = ko.mapping.fromJS(model); 
 
}; 
 

 
app.ViewModel.prototype.alertRowName = function alertRowName(user) { 
 
    alert(user.UserName()); 
 
}; 
 

 
ko.applyBindings(new app.ViewModel(app.model));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> 
 

 
<table> 
 
    <tbody data-bind="foreach: data"> 
 
    <tr> 
 
     <td data-bind="text: UserId"></td> 
 
     <td><button data-bind="click: $root.alertRowName, text: UserName"></button> </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

当心......在这里DRAGONS

你可以做到以下几点，但我会强烈建议不这样做。 这是将一个函数附加到Window对象使其成为一个全局函数。每个事件处理程序通常都有一个可用的事件对象。

var app = Window.app || {}; 
 
app.model = [{ 
 
    UserId: 1, 
 
    UserName: "User Name Here", 
 
}]; 
 

 
app.ViewModel = function ViewModel(model){ 
 
    var self = this; 
 
    self.data = ko.mapping.fromJS(model); 
 
}; 
 

 
app.ViewModel.prototype.alertRowName = function alertRowName(user) { 
 
    alert(user.UserName()); 
 
}; 
 

 
ko.applyBindings(new app.ViewModel(app.model)); 
 

 
Window.myButtonClick = function(){ 
 
    var item = ko.dataFor(event.currentTarget); 
 
    alert(item.UserName()); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> 
 

 
<table> 
 
    <tbody data-bind="foreach: data"> 
 
    <tr> 
 
     <td data-bind="text: UserId"></td> 
 
     <td><button onclick="Window.myButtonClick()" data-bind="text: UserName"></button> </td> 
 
    </tr> 
 
    </tbody> 
 
</table>