durandal 위젯을 동적으로 추가하십시오.

Question

위젯을 페이지에 동적으로 추가하는 프로세스는 무엇입니까? 기본적으로 viewmodel의 addWidget() 함수에 연결되는 뷰에 "Add Widget"버튼이 있습니다. 기본적으로 누군가가 버튼을 눌렀을 때 나는 durandal 위젯의 인스턴스를 동적으로 생성하여 DOM에 추가하려고합니다.

var addWidget = function() { 

     var parent = $('<div></div>') 
      .attr('data-bind', 'widget: { kind:\'myWidget\'}') 
      .appendTo($('#dashboardContent')) 
      .get(0); 

     return widget.create(parent, { id: 'Hello World' }); 
    } 

나는 위젯 HTML (보기)는 DOM에 추가됩니다 브라우저 개발자 도구에서 볼 수 있지만,이 위젯을 렌더링하지, 그리고 활성화 할 수 있습니다 위젯에서 호출되지 않는 : 내 코드는 다음과 같습니다 .

무엇이 누락 되었습니까?

Answer 1

jQuery를 사용하여 DOM에 위젯을 추가하려고합니다. 큰 소리로 생각해 보면 A : jQuery는 정품 인증 (Durandal의 라우터에서 처리)이 무엇인지 알지 못합니다. B : 아무 것도 올바르게 바인딩되지 않습니다. 위젯을 추가하려는 경우 위젯이 포함 된 observableArray를 만들고 여기에 추가하면 어떻습니까? 그건 조금 바보 소리를 할 수 있으며, 나는 그것을 접근하는 가장 좋은 방법은 잘 모르겠지만, 기본적으로는 뷰 모델에서이

처럼 보일 수 -

var myWidgets = observableArray(); 
myWidgets.push(someObjectsToComposeTheWidget); 

을 그리고 당신의보기 -

<ul data-bind="foreach: myWidgets"> 
    <li data-bind="widget: {kind:'yourWidget', items: somethingGoesHere, headerProperty:'name'}">/div> 
<ul> 

이렇게하면 지저분 해지지 않고 위젯을 동적으로 추가하고 표시 할 수 있으며 jQuery를 사용하여 표시 할 수 있습니다.