emberjs 핸들 바 애플리케이션에서 깨끗한 HTML 얻기

Question

Ember.js에서 HTML (이메일/페이지) 작성 도구를 사용하여 머리를 감싸는 방법으로 작성했습니다. 일종의 WYSIWYG 일 것 같습니다.

사용자가 다른 값 (링크, 텍스트 등)을 가진 다양한 객체를 추가하면 객체는 다른 템플릿을 가질 수 있으며 컨트롤러에 다시 제공되는 jQuery UI로 정렬 될 수 있습니다. 사용자가 화면에서 보는 부분은 실제로 켜져 있으며 현재는 지속성 방법으로 localstorage에서 깨끗한 JSON을 저장하고 다시로드하고 있습니다.

내가 정말로하고 싶은 것은 사용자가보고있는 깨끗한 HTML 버전을 생성 할 수 있다는 것입니다. 프론트 엔드 애플리케이션에 작성된 것 또는 JSON을 처리하여 서버 측에서 내 보낸 것.

JS, Ember 및 Handlebars를 가능한 한 많이 유지하고 다른 위치에 너무 많은 템플릿/코드를 다시 구현하지 않는 것이 좋습니다.

내 렌더링 된 출력에서 ​​'행'의 예는 다음과 같습니다.

.row-controls는 전역 편집기 토글로 켜고 끕니다.

<script id="metamorph-11-start" type="text/x-placeholder"></script> 
    <div id="ember507" class="ember-view template-row ui-droppable"> 
    <ul id="ember524" class="ember-view row-controls"> 
     <li class="dragger"><a href="#">drag</a></li> 
     <li class="type"><a href="#" data-ember-action="19">type</a></li> 
     <li class="edit"><a href="#" data-ember-action="20">edit</a></li> 
     <li class="delete"><a href="#" data-ember-action="21">delete</a></li> 
    </ul> 
    <script id="metamorph-12-start" type="text/x-placeholder"></script> 
    <script id="metamorph-13-start" type="text/x-placeholder"></script> 
     <h2><a href="http://foo.com/bar" data-bindattr-34="34"> 
     <script id="metamorph-19-start" type="text/x-placeholder"></script> 
      Link title text 
     <script id="metamorph-19-end" type="text/x-placeholder"></script> 
     </a></h2> 
     <img src="http://foo.com/image.png" data-bindattr-35="35"> 
     <script id="metamorph-20-start" type="text/x-placeholder"></script> 
     Teaser/synopsis 
     <script id="metamorph-20-end" type="text/x-placeholder"></script> 
     <a href="http://foo.com/bar" data-bindattr-36="36">Read more</a> 
    <script id="metamorph-13-end" type="text/x-placeholder"></script> 
    <script id="metamorph-12-end" type="text/x-placeholder"></script> 
    </div> 
<script id="metamorph-11-end" type="text/x-placeholder"></script> 

나는 이상한 일이 일을 할 것이 제한 실용적인 응용 프로그램으로 보일 수 있습니다 생각하지만 난 그것을 마무리하고 싶습니다 지금은 또한, 나는 생각 : 시작 한 모든 대답에 관련된 원칙 수 아마 다른 응용 프로그램을 가지고, 난 아직 그것을 생각하지 않았습니다

감사! 그리고 Ember에 관한 이전의 몇 가지 질문에 답해 주신 다른 분들께 감사드립니다.

편집

그냥, 나는이 링크를 찾는 경우 사람이

<h2><a href="http://foo.com/bar">Link title text</a></h2> 
<img src="http://foo.com/image.png"> 
Teaser/synopsis 
<a href="http://foo.com/bar">Read more</a> 

솔루션 편집

같은 출력을 얻기에 대해서 이야기하고 명확 - 내가 추가 한 (내 표준 JS 버전) 속성 루프 내의 attr에 대한 검사.

<script> 
// ... 
return $.each($this[0].attributes, function(index, attr) { 
    // this bit added 
    if(!attr) { 
    return; 
    } 
    if (attr.name.indexOf('data-bindattr') === -1) { 
    return; 
    } 
    // ... 
</script> 

내가 진행했던 일부 다른 코드에서 오류가되었을 수도 있지만, jQuery를 루프에서 ATTR으로 '정의되지 않은'지나가는했다. jQuery는 각 함수 전체를 해결하기를 원하므로이 함수를 정확히 디버깅 할 수 없습니다. 그 수표는 나를 위해 지금 일하는 것 같다. 특정 원본 coffeescript 파일을 고려하는 방법을 모르겠습니다. CodeBrief에서

Answer 1

ghempton이 멋진 게시물에 대해 조금 이야기 : http://codebrief.com/2012/03/eight-ember-dot-js-gotchas-with-workarounds/

확인 팁 7 도 그들 모두를 읽고, 그것을 그 가치.

그건 그렇고, 그것은 coffeescript 게시물에, JS 버전을 얻을 필요가 있다면 http://coffeescript.org/ Try Coffeescript 탭에 가서 그것을 변환!