DotVVM : KnockoutJS 용 내장 바인딩 사용자 정의 바인딩 핸들러가있는 타사 JavaScript 컨트롤을 래핑하는 단계

Question

KnockoutJS 바인딩 핸들러가 이미 구현 된 JavaScript 컨트롤을 사용하고 싶습니다. "Code-only Controls"와 같은 DotVVM 튜토리얼과 DotVVM 소스 코드의 컨트롤을 검토 한 결과 DotVVM "Rendering Pipeline"을 통해 컨트롤을 렌더링해야하는 측면과 범위를 혼동합니다. 참으로 그들은 있어야합니다.

또한 KnockoutJS 바인딩 핸들러가 이미 구현되어있는 컨트롤은 이미 구현 된 KnockoutJS 바인딩 핸들러가없는 컨트롤과 마찬가지로 래핑하는 프로세스입니까?

Answer 1

이미 녹아웃 바인딩 핸들러가있는 경우 적절한 HTML을 렌더링하기위한 컨트롤을 작성하기 만하면됩니다.

여기서 유일한 어려움은 컨트롤 속성의 값이 태그에 하드 코딩되거나 데이터 바인딩 일 수 있다는 것입니다. 일부 속성은 이러한 방법 중 하나만 허용하고 일부 속성은 둘 모두 허용합니다.

기본적으로 기본 생성자에서 HtmlGenericControl에서 상속받은 클래스를 만들고 렌더링해야하는 HTML 요소를 알려야합니다. 예 : public MyControl() : base("div").

그런 다음 컨트롤 속성을 선언해야합니다. dotprop 코드 스 니펫을 사용하여 속성 본문을 생성하고 MarkupOptions 속성을 사용하면 하드 코딩 된 값이나 데이터 바인딩이 적합하지 않은 경우 사용하지 않도록 설정할 수 있습니다.

그리고 마지막으로 HTML을 렌더링해야합니다. data-bind 속성 만 렌더링해야하는 경우 AddAttributesToRender을 재정의해야합니다.

writer.AddKnockoutDataBind("myBindingHandler", this, MyProperty,() => { /* handle the hard-coded value */ })으로 전화 할 수 있습니다. 속성에 데이터 바인딩이 포함되어 있으면 자동으로 변환됩니다. 하드 코드 된 값이 들어 있으면 마지막 인수 (람다)가 호출됩니다.

컨트롤이 더 복잡하고 템플릿을 사용하거나 포스트 백을 호출하는 경우 컨트롤 안에 자식 컨트롤을 만들고 바인딩을 올바르게 설정해야하며이 경우 수동으로 렌더링 할 필요가 없습니다. DotVVM는 복잡한 렌더링 파이프 라인 사용하는 이유

몇 가지 이유가 있습니다 : 속성이 데이터 바인딩 및 하드 코딩 된 값을 모두 포함 할 수 있기 때문에

• 을, 당신은 많은 if 문으로 끝낼 것입니다. 때로는 바인딩이 서버에서 평가되고 때로는 바인딩이 JS로 변환됩니다. 또한 일부 컨트롤은 매우 복잡하며 일부 자식 컨트롤을 만들어야합니다.
• 녹아웃에는 data-bind 속성에 선언 된 모든 속성이 필요합니다. 쉼표로 구분되므로 API가 연결을 변환하고 적절한 JavaScript 표현으로 변환합니다.
• 컨트롤 렌더링을 AddAttributesToRender, RenderBeginTag, RenderContents 및 RenderEndTag 메서드로 나누면 상속을 사용하여 컨트롤을 확장 할 수 있습니다. ASP.NET Web Forms에서이 코드를 복사 한 것은 매우 효과적이었습니다.

렌더링하려는 것을 제공 할 수 있다면 더 구체적인 답변을 드릴 수 있습니다.