Knockoutjs Knopf klicken

Question

Hallo, wie kann ich meinen Wert mit knockoutjs klicken Ereignis meine Tastencode

<button data-bind="click : LikeButtonClick , value : MessageId" class="btn btn-default like"><span data-bind="text:LikeCount"></span> <i class="fa fa-thumbs-o-up"></i></button> 

und meine knockoutjs klicken Code

var LikeButtonClick = function() { 
    alert(""); 
} 

---

bekommen Und wie kann ich aktualisieren meine Vorlieben nach wie Knopfklick-Ereignis. Ich verwende Template-Bindung. Meine Vorlage Bindung Code ist

var viewModel = { 
      messages: ko.observableArray() 
     }; 
     ko.options.useOnlyNativeEvents = true; 
     ko.applyBindings(viewModel); 
     $.getJSON('@Url.Action("statusMessages", "Home")', function (data) { 
      viewModel.messages(data); 
     }); 

und mein wie Button-Code

var LikeButtonClick = function (id) { 
      $.ajax({ 
       url: '/Home/Like/' + id, 
       type: 'POST', 
       success: function (data) { 
         // refresh 
         }); 
       } 
      }); 
     } 

Answer 1

this Zusammenhang auf die Methode übergeben wird Ihr Viewmodel sein, oder was auch immer Sie an das Element gebunden. Inside LikeButtonClick sollten Sie in der Lage sein, den Wert durch Bezugnahme auf die Eigenschaft this.MessageId() zu erhalten.

Wenn Sie einen Wert an den Click-Handler übergeben möchten, sollten Sie eine Inline-Funktion deklarieren, in der Sie Daten binden oder die Funktion mit einem Kontext verknüpfen. Hier ist der Kontext das Hauptansichtsmodell:

data-bind="click: LikeButtonClick.bind($root,'green')" 

var LikeButtonClick = function (src) { 
     alert(src); // src='green' in this example 
    } 

Answer 2

Eine andere Methode besteht darin, die Klickfunktion in Ihr Datenmodell zu integrieren. Hier habe ich die Funktion direkt zum Artikel hinzugefügt. Jeder Klick betrifft nur die eigenen Objektinformationen.

function Post() { 
 
    var self = this; 
 
    self.Text = ko.observable("Lorem Ipsum"); 
 
    self.Liked = ko.observable(false); 
 
    self.LikeCount = ko.computed(function() { 
 
    return self.Liked() ? 1 : 0; 
 
    }); 
 
    self.MessageId = ko.observable(1); 
 

 

 
    self.LikeButtonClick = function() { 
 
    self.Liked(!self.Liked()); 
 
    } 
 

 
} 
 

 
function viewModel() { 
 
    var self = this; 
 

 
    self.Posts = ko.observableArray(); 
 

 
    self.Load = function() { 
 
    self.Posts.push(new Post()); 
 
    self.Posts.push(new Post()); 
 
    self.Posts.push(new Post()); 
 
    } 
 
    self.Load(); 
 
} 
 

 
ko.applyBindings(new viewModel());

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

 
<div data-bind="foreach: Posts"> 
 

 
    <div data-bind="text:Text"></div> 
 
    <button data-bind="click: LikeButtonClick, value: MessageId" class="btn btn-default like"> 
 
<span data-bind="text:LikeCount"></span> 
 
<i class="fa fa-thumbs-o-up"></i></button> 
 
</div>