모델 내의 녹아웃 js 클릭 이벤트

Question

다음은 게시물 및 주석 기능이 포함 된 코드입니다. 나는 data-bind="click: addComment" 및 data-bind="click: addPost"과 같은 ul 태그 클릭 이벤트 내에서 뷰를 바인딩하고 있습니다. 괜찮 았어.

제 생각에는 data-bind="click: addComment"을 다른보기에 넣으면 작동하지 않습니다. 내 data-bind="click: addComment"을 다른보기로 유지해야하며 게시물 모델 내부에 self.addComment을 사용해야합니다. 누군가 도움을받을 수 있습니까?

<div class="publishContainer"> 
<textarea class="msgTextArea" id="txtMessage" data-bind="value: newMessage, jqAutoresize: {}" style="height:3em;" placeholder="What's on your mind?"> </textarea> 
<input type="button" data-url="/Wall/SavePost" value="Share" id="btnShare" data-bind="click: addPost"> 
</div> 
<ul id="msgHolder" data-bind="foreach: posts"> 
<li class="postHolder"> 
    <img data-bind="attr: { src: PostedByAvatar }"><p><a data-bind="text: PostedByName"></a>: <span data-bind=" html: Message"></span></p> 
    <div class="postFooter"> 
     <span class="timeago" data-bind="text: PostedDate"></span>&nbsp;<a class="linkComment" href="#" data-bind=" click: toggleComment">Comment</a> 
     <div class="commentSection"> 
      <ul data-bind="foreach: PostComments"> 
       <li class="commentHolder"> 
        <img data-bind="attr: { src: CommentedByAvatar }"><p><a data-bind="text: CommentedByName"></a>: <span data-bind=" html: Message"></span></p> 
        <div class="commentFooter"> <span class="timeago" data-bind="text: CommentedDate"></span>&nbsp;</div> 
       </li> 
      </ul> 
      <div style="display: block" class="publishComment"> 
       <textarea class="commentTextArea" data-bind="value: newCommentMessage, jqAutoresize: {}" placeholder="write a comment..."></textarea> 
       <input type="button" value="Comment" class="btnComment" data-bind="click: addComment"/> 
      </div> 
     </div> 
    </div> 
</li> 
</ul> 
</div> 

//second view// 
<div class="publishContainer"> 
    <input type="button" value="Comment" class="btnComment" data-bind="click: addComment"/> 
<div> 

그리고 JS는 :

문제에

//Post Model 
function Post(data) { 
    var self = this; 
    data = data || {}; 
    self.PostId = data.PostId; 
    self.Message = ko.observable(data.Message || ""); 
    self.PostedBy = data.PostedBy || ""; 
    self.PostedByName = data.PostedByName || ""; 
    self.PostedByAvatar = data.PostedByAvatar || ""; 
    self.PostedDate = getTimeAgo(data.PostedDate); 
    self.error = ko.observable(); 
    self.PostComments = ko.observableArray(); 

    self.newCommentMessage = ko.observable(); 
    self.addComment = function() { 
    var comment = new Comment(); 
    comment.PostId = self.PostId; 
    comment.Message(self.newCommentMessage()); 
    return $.ajax({ 
     url: commentApiUrl, 
     dataType: "json", 
     contentType: "application/json", 
     cache: false, 
     type: 'POST', 
     data: ko.toJSON(comment) 
    }) 
    .done(function (result) { 
     self.PostComments.push(new Comment(result)); 
     self.newCommentMessage(''); 
    }) 
    .fail(function() { 
     error('unable to add post'); 
    }); 
    } 
    if (data.PostComments) { 
    var mappedPosts = $.map(data.PostComments, function (item) { return new Comment(item); }); 
    self.PostComments(mappedPosts); 
    } 
    self.toggleComment = function (item,event) {  
    $(event.target).next().find('.publishComment').toggle(); 
    } 
} 

// Comment Model: 

function Comment(data) { 
    var self = this; 
    data = data || {}; 
    self.CommentId = data.CommentId; 
    self.PostId = data.PostId; 
    self.Message = ko.observable(data.Message || ""); 
    self.CommentedBy = data.CommentedBy || ""; 
    self.CommentedByAvatar = data.CommentedByAvatar || ""; 
    self.CommentedByName = data.CommentedByName || ""; 
    self.CommentedDate = getTimeAgo(data.CommentedDate); 
    self.error = ko.observable();  
} 

function viewModel() { 
    var self = this; 
    self.posts = ko.observableArray(); 
    self.newMessage = ko.observable(); 
    self.error = ko.observable(); 
    self.loadPosts = function() { 
    //To load existing posts 
    $.ajax({ 
     url: postApiUrl, 
     dataType: "json", 
     contentType: "application/json", 
     cache: false, 
     type: 'GET' 
    }) 
     .done(function (data) { 
      var mappedPosts = $.map(data, function (item) { return new Post(item); }); 
      self.posts(mappedPosts); 
     }) 
     .fail(function() { 
      error('unable to load posts'); 
     }); 
    } 

    self.addPost = function() { 
    var post = new Post(); 
    post.Message(self.newMessage()); 
    return $.ajax({ 
     url: postApiUrl, 
     dataType: "json", 
     contentType: "application/json", 
     cache: false, 
     type: 'POST', 
     data: ko.toJSON(post) 
    }) 
    .done(function (result) {   
     self.posts.splice(0,0,new Post(result)); 
     self.newMessage(''); 
    }) 
    .fail(function() { 
      error('unable to add post'); 
    }); 
} 
self.loadPosts(); 
return self; 
}; 

ko.applyBindings(new viewModel(),documentgetElementByClassName(publishContainer)); 

Answer 1

하나의 옵션은 selectedPost/currentPost을 유지하는 observable 이 있어야한다는 것입니다. 이 소품은 당신이 전에 Add Comment를 눌러야합니다.

다음과 같이 viewModel을 업데이트하십시오.

function viewModel() { 
    var self = this; 
    self.posts = ko.observableArray(); 
    self.newMessage = ko.observable(); 
    self.error = ko.observable(); 
    self.loadPosts = function() { 
     //To load existing posts 
     $.ajax({ 
       url: postApiUrl, 
       dataType: "json", 
       contentType: "application/json", 
       cache: false, 
       type: 'GET' 
      }) 
      .done(function(data) { 
       var mappedPosts = $.map(data, function(item) { 
        return new Post(item); 
       }); 
       self.posts(mappedPosts); 
      }) 
      .fail(function() { 
       error('unable to load posts'); 
      }); 
    } 

    self.addPost = function() { 
     var post = new Post(); 
     post.Message(self.newMessage()); 
     return $.ajax({ 
       url: postApiUrl, 
       dataType: "json", 
       contentType: "application/json", 
       cache: false, 
       type: 'POST', 
       data: ko.toJSON(post) 
      }) 
      .done(function(result) { 
       self.posts.splice(0, 0, new Post(result)); 
       self.newMessage(''); 
      }) 
      .fail(function() { 
       error('unable to add post'); 
      }); 
    } 

    self.selectedPost = ko.observable(); // You have to update this property, before you click on Add Comment from second view. 

    self.addComment = function() { 
     var comment = new Comment(); 
     comment.PostId = self.selectedPost.PostId; 
     comment.Message(self.newCommentMessage()); 
     return $.ajax({ 
       url: commentApiUrl, 
       dataType: "json", 
       contentType: "application/json", 
       cache: false, 
       type: 'POST', 
       data: ko.toJSON(comment) 
      }) 
      .done(function(result) { 
       self.selectedPost.PostComments.push(new Comment(result)); 
       self.newCommentMessage(''); 
      }) 
      .fail(function() { 
       error('unable to add post'); 
      }); 
    } 

    self.loadPosts(); 
    return self; 
}; 

그리고,

<div style="display: block" class="publishComment"> 
       <textarea class="commentTextArea" data-bind="value: newCommentMessage, jqAutoresize: {}" placeholder="write a comment..."></textarea> 
       <input type="button" value="Comment" class="btnComment" data-bind="click: $parent.addComment"/> 
      </div>