Aurelia로 동적으로 HTML을 향상시키는 방법

Question

우리는 Aurelia 앱에서 데이터를 렌더링하기 위해 API를 사용하여 WordPress에 모든 페이지 콘텐츠와 블로그 게시물 등을 저장합니다. 이것은 잘 작동하고 있습니다.

<div class="excerpt" innerhtml.bind="post.excerpt.rendered"></div>

저자는 지금 팝업에 링크하거나 route-href 또는 아우렐 리아는 자신의 블로그 게시물 내에서 속성을 다른 사용자 지정을 사용할 수 있도록하고 싶습니다 그러나 코드는 innerhtml.bind가 아우렐 리아에 의해 해석되지 않습니다 사용하여 페이지에 추가.

은 내가이 아우렐 리아에서 <a href="..."> "바로 작동"정상적인 것을 좋아한다 -.? 그러나 우리는 저자가 사용할 수없는 사용자 지정 특성 (같은 <button popup="name-of-popup">...</button>의 많음이 우리가 이것을 극복 할 수있는 방법

편집 : @bigopon의 의견을 통해 뭔가 시작했지만 아직 제대로 작동하지 않습니다. 검색시 빨거나 문서가 약간 부족한 TemplatingEngine.enhance() 메서드가 있지만 시도해 보았습니다. 다음과 같은 맞춤 속성 :

import {Aurelia, inject, TemplatingEngine} from 'aurelia-framework'; 

@inject(Element, Aurelia, TemplatingEngine) 
export class AureliaEnhanceCustomAttribute { 
    constructor (el, aurelia, templatingEngine) { 
     this.el = el; 
     this.aurelia = aurelia; // NOTE: I've never done this before - is it even correct? 
     this.templatingEngine = templatingEngine; 
    } 

    attached() { 
     this.el.innerHTML = this.value; 

     // NOTE: Without checking for this we get an endless loop of attached() calls 
     if (!this.el.classList.contains('au-target')) { 
      this.templatingEngine.enhance({ 
       element: this.el, 
       container: Aurelia.container, // NOTE: I'm guessing here 
       resources: Aurelia.resources, // NOTE: Same here, but I need all my global resources to be available inside the enhanced element too 
       bindingContext: {} // NOTE: Not sure what to pass in here at all.. :/ 
      }); 
     } 
    } 
} 

그리고 내가 그렇게처럼 사용하고 있습니다 :

exampleContent이 같은 것을 볼 수있는 API 호출에서 가져온 문자열입니다

<div aurelia-enhance.bind="exampleContent"></div>

: '<my-custom-element></my-custom-element><button my-custom-attribute="some-value">Log in</button>'합니다.

Answer 1

오른쪽 트랙에 있습니다. 몇 가지

• bindingContext/overrideContext을 고려하는 것이있다 :이 두 사용자 정의 속성의 bind 라이프 사이클에 접선에 의해 얻을 수 있습니다. 따라서 enhance 지침 (bindingContext 만 필요하지만 두 가지를 모두 통과하면 범위를 벗어나는 데 도움이 됨)로 전달할 수 있습니다. bindingContext에 대해서, 당신이 속한 뷰 모델이 99 %이지만, 당신은 언제나 다른 객체를 사용할 수 있습니다. 이 경우 this (맞춤 속성보기 모델)이 적합합니다.

• 리소스 :보기의 리소스 범위를 원하는 방식에 따라 달라지며 TemplatingEngine.prototype.enhance이 반환합니다. 전역 Aurelia 인스턴스의 resources을 전달하면 사용자 정의 요소의 로컬 리소스 범위가 산출되지 않습니다. 속성에 주석을 달아주는 요소와 동일한 리소스를 갖기 위해서는 속성의 수명주기를 created에 연결하고 첫 번째 매개 변수는 owningView . 이것은 속성을 포함하는 사용자 정의 요소의보기입니다.그럼 당신은 owningView.resources

• 청소하여 리소스에 액세스 할 수 있습니다 : TemplatingEngine.prototype.enhance가 View을 반환, 당신은 당신의 속성 라이프 사이클에 detached 및 unbind이 참조를 저장할 필요가 너무

• 는 살균

예 : https://gist.run/?id=9dd32bc8a772526ae527f593e26b275b

위의 요지는 상속/전자의 예입니다. 나는 담화에 관한 또 다른 질문에 답하기 위해 만들었습니다. 더 많은 예를 보려면 select-field을 참조하십시오. 그것은 당신이 거기서 한 것과 비슷합니다.

P/S : 해결책이 만족 스럽다면 블로그 게시물/기사 작성 또는 Aurelia Discourse 포럼에 주제를 열어 다른 사람들을 도울 수 있습니다. 누구도 어려움을 겪을 수 있습니다.

---

업데이트 예 :

import {Aurelia, inject, TemplatingEngine, DOM} from 'aurelia-framework'; 

@inject(Element, TemplatingEngine) 
export class AureliaEnhanceCustomAttribute { 
    constructor (el, aurelia, templatingEngine) { 
     this.el = el; 
     this.templatingEngine = templatingEngine; 
    } 

    // Custom attribute doesn't have its own view 
    // Only the view of the custom element that owns it 
    created(owningElementView, thisView) { 
     this.owningElementView = owningElementView; 
    } 

    bind(bindingContext, overrideContext) { 
     this.bindingContext = bindingContext; 
     this.overrideContext = overrideContext; 
    } 

    attached() { 
     this.el.innerHTML = this.value; 

     // NOTE: Without checking for this we get an endless loop of attached() calls 

     if (!this.el.classList.contains('au-target')) { 
      this.dynamicView = this. this.templatingEngine.enhance({ 
       element: this.el, 
       // we have two choices here, either the container of owning element, or this attribute 
       // Lets go with the element, since it propbably has everything we need 
       container: this.owningElementView.container, 
       // the resources has information about its parent, 
       // So we just need the resources of the element containing this attribute 
       resources: this.owningElementView.resources, 
       // Or this.bindingContext (same) 
       bindingContext: this, 
       // this helps travel up 
       overrideContext: this.overrideContext 
      }); 
     } 
    } 

    detached() { 
     this.dynamicView.detached(); 
    } 

    unbind() { 
     if (this.dynamicView) { 
      this.dynamicView.unbind(); 
     } 
    } 
}