javascript - 是否可以将 Knockout.JS 变量传递到 onclick 函数而不进行绑定(bind)？

Question

是否可以将 Knockout.JS 变量传递到 onclick 函数而不将该函数绑定(bind)到 View 模型？

下面，我尝试传递下面特定行的用户名参数:

<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

你可以这样做。
编辑

嗯……刚刚注意到没有绑定(bind)。您能解释一下为什么不绑定(bind)吗？

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>

小心...这里有龙

您可以执行以下操作，但我强烈建议不要这样做。这是将一个函数附加到 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>