2017-07-11 2 views
0

Kann eine Knockout.JS-Variable in eine Onclick-Funktion übergeben werden, OHNE dass die Funktion an das View-Modell gebunden wird?Ist es möglich, eine Knockout.JS-Variable in eine Onclick-Funktion OHNE Bindung zu übergeben?

Unten ich versuche, den Benutzernamen Parameter für die jeweilige Zeile unten weitergeben müssen:

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

Antwort

2

Sie können es tun so etwas.
EDIT

hmmmm .. habe gerade bemerkt, die ohne Bindung. Kannst du erklären, warum ohne Bindung?

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>

PASSEN ... hier sein DRAGONS

Sie können folgende tun, aber ich würde das nicht tun, wird unbedingt empfohlen. Dies fügt dem Window-Objekt eine Funktion hinzu, die es zu einer globalen Funktion macht. Für jeden Ereignishandler steht normalerweise ein Ereignisobjekt zur Verfügung, das Sie verwenden können.

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>

+0

ohne Bindung würde bedeuten, ein Onclick = "javascriptfuction (KOvariable)" in der Schaltfläche zu machen. Anstatt die Funktion an das Viewmodel zu binden. – Ophiucus

+1

Ich habe einen Code hinzugefügt, der das tut, was Sie fragen, obwohl ich dringend davon abrate, ihn zu benutzen. Der Vorteil des View-Model-Ansatzes besteht darin, dass ein Container um die verschiedenen Funktionen gelegt wird, auf die das View-Modell zugreifen soll. –

Verwandte Themen