mdui의 일부 컴포넌트는 DOM 로드가 완료된 후 초기화되어야 합니다. 따라서 동적으로 생성된 컴포넌트는 자동으로 초기화되지 않습니다. 이를 위해 mdui는 mdui.mutation() 메서드를 제공합니다.
이 메서드를 호출하면 페이지 내의 아직 초기화되지 않은 모든 컴포넌트를 초기화합니다.
var html =
'<select class="mdui-select" mdui-select>' +
' <option value="1">State 1</option>' +
' <option value="2">State 2</option>' +
' <option value="3">State 3</option>' +
'</select>';
// Select 컴포넌트를 동적으로 추가했지만, 사용자 정의 속성을 통해 호출되었기 때문에 자동으로 초기화되지 않았습니다.
$('body').append(html);
// 페이지 내의 아직 초기화되지 않은 모든 컴포넌트를 초기화하기 위해 이 메서드를 호출합니다.
mdui.mutation();mdui.mutation() 메서드에 두 개의 매개변수를 전달하면 직접 작성한 컴포넌트를 초기화하는 데 사용할 수 있습니다. 첫 번째 매개변수는 CSS 선택자이고, 두 번째 매개변수는 초기화 함수입니다.
mdui.mutation(selector, apiInit)를 호출하면 CSS 선택자와 초기화 함수가 바인딩되며, $(selector).each(apiInit)가 실행되어 초기화 함수가 호출됩니다.
다음에 mdui.mutation()이 호출될 때 해당 CSS 선택자에 대응하는 컴포넌트가 아직 초기화되지 않았다면 자동으로 초기화 함수가 호출됩니다.
특정 요소 내부의 컴포넌트만 초기화해야 하는 경우 $(selector).mutation()을 호출할 수 있습니다. 이 메서드는 selector 및 그 하위 요소 중 아직 초기화되지 않은 컴포넌트를 초기화합니다.