2014-03-27 3 views
1

코드 :내 contenteditable div의 콘텐츠가 사라지는 이유는 무엇입니까?

post_page.js :

Template.postPage.events({ 
// Updating a post 
'submit form': function(e) { 
    e.preventDefault(); 

    var post = { 
     title: $(e.target).find('[name=title]').val(), 
     content: $(e.target).find('[name=content]').val() 
    }; 

    Posts.update(this._id, {$set: post}); 
    }, 

    'click .move-up': function(e) { 
    // Moving up a post 
    e.preventDefault(); 

    var prevPost = Posts.findOne({position: this.position - 1}); 

    if (prevPost) { 
     Posts.update(prevPost._id, {$set: {position: prevPost.position + 1}}); 
     Posts.update(this._id, {$set: {position: this.position - 1}}); 
    } 
    }, 

(...) 

Template.postPage.rendered = function() { 
    // Plugin to turn the text area into a contenteditable div 
    var editor; 
    $(function() { 
    editor = new Simditor({ 
    textarea: $("#input-content"), 
    placeholder: "...", 
    pasteImage: true, 
    toolbar: ["title", "bold", "italic", "underline", "link", "image", "indent", "outdent"], 
    upload: { 
     url: "/upload" 
    } 
    }); 

post_page.html :

<template name="postPage"> 
    <div class="posts"> 
    <div class="post"> 
     <div class="post-content"> 
     <span>title: {{title}}, position: {{position}}</span> 
     <a class="move-up" href="javascript:;">Move Up</a> 
     <a class="move-down" href="javascript:;">Move Down</a> 
     <a href="{{pathFor 'postPage'}}">See Post</a> 
     <a class="save-file" href="javascript:;">Save Post</a> 
     </div> 
    </div> 
    </div> 

    <form class="form" role="form"> 
    <div class="form-group"> 
     <label for="exampleInputEmail1">Title</label> 
     <input name="title" type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter email" value="{{title}}"> 
    </div> 
    <div class="form-group"> 
     <label for="exampleInputPassword1">Content</label> 
     <textarea name="content" class="form-control" rows="3">{{content}}</textarea> 
    </div> 
    <button type="submit" class="btn btn-default submit">Submit</button> </form> </template> 

는 단일 페이지 응용 프로그램입니다 및 모든 작동하지만 몇 가지 이유의 내용에 대해 내용이 수정 가능한 div은 내가 move up 인 경우 post이 아닌 경우 사라집니다. 현재 표시되고있는 (텍스트 영역의 내용은 남아가 나는 경우 페이지 렌더링을 다시 돌아옵니다) :

enter image description here

이 원인이 될 수 무엇을? 그것을 고치는 방법?

답변

1

이 골대를 이동 위/아래에 템플릿을 일으키는 완전히 다시 렌더링 나는 simditor 기대 때문에 DOM이 지속하는 것으로 의심, 그 중 하나를 수행 유성의 preserve- 전 rendered 또는 실행에하지 다시 실행 입력 패키지에 textarea이 다시 채워졌습니다.

당신은 (유성은 블레이즈의 템플릿 엔진을 위로 때까지) {{#constant}}에 ( simditor에 의해 생성 된 적어도 textarea 가능성이 전체 DOM) 재 렌더링에 민감한 영역을 포장하여 문제를 해결하려고 할 수

. 보존하려는 정확한 DOM 요소를 알고 있다면 preserve to prevent them from being re-rendered을 사용할 수도 있습니다.

관련 문제