Как взять значение из поля ввода и присвоить его объекту JavaScript в вашей модели представления?

Question

Мне нужно создать простой блок комментариев (например, комментарии к facebook, например) с нокаутом js. Я новичок в KO, и я попытался найти, но я не могу найти ответ на этот глупый вопрос. Я потратил больше времени, но мне нужно закончить домашнюю работу. Так что это мой HTML:

<div id="comment-input-container"> 
    <input type="text" placeholder="comment..." data-bind="value: commentText"> 
    <button type="submit" data-bind="click: addComment">Add comment</button> 
</div> <!-- From this input I need to take the commentText and use it in the addComment function --> 
<hr> 

<!-- Knockout Template for showing comments --> 
<div id="comment-box" data-bind="foreach: comments"> 
    <p data-bind="text: fullName"></p> 
    <p data-bind="text: datePosted"></p> 
    <div class="commentBody"> 
     <div class="commentContent"> 
      <div class="commentText" data-bind="text: commentText"></div> 
      <div class="commentButtonsBox"></div> 
     </div> 
    </div> 
</div> 

А вот JS:

function CommentsViewModel() { 
    var self = this; 

    self.comments = ko.observableArray([{ 
     fullName: "Todor Atanasov", 
     datePosted: new Date(), 
     commentText: "Awesome vid guys ty."} 
    ]); 

    self.addComment = function() { 
     self.comments.push({ 
      fullName: "new guy", 
      datePosted: new Date(), 
      commentText: "new comment" 
     }) 
    } 
} 

ko.applyBindings(new CommentsViewModel()); 

Так что я должен написать в месте commentText: "Новый комментарий"

Answer 1

Попробуйте это:

function CommentsViewModel() { 
    var self = this; 

    self.newComment = ko.observable(); //add this 

    self.comments = ko.observableArray([{ 
     fullName: "Todor Atanasov", 
     datePosted: new Date(), 
     commentText: "Awesome vid guys ty."} 
    ]); 

    self.addComment = function() { 
     self.comments.push({ 
      fullName: "new guy", 
      datePosted: new Date(), 
      commentText: self.newComment() 
     }) 
    } 
} 

ko.applyBindings(new CommentsViewModel()); 

Заменить этот HTML строку:

<input type="text" placeholder="comment..." data-bind="value: newComment " />