녹아웃 js 부트 스트랩 콤보 상자 맞춤 바인딩

Question

녹아웃 (및 mvc)과 함께 부트 스트랩 콤보 상자 플러그인 사용과 관련하여 질문이 있습니다.

내 템플릿에서 Dropdownlisfor, textboxfor 등과 같은 상자 외부 MVC HTML 도우미를 사용하고있는 상황이 있습니다. 녹아웃을 사용하여 데이터 컬렉션을 템플릿에 바인딩합니다. mvc html 헬퍼는 DropDownlistfor 도우미에 대한 '선택'컨트롤을 만듭니다. 필요한 모든 유효성 검사 속성 등을 설정하기 위해 컨트롤에 부트 스트랩 플러그인을 호출하기 전에 렌더링이 필요합니다. 처음에는 Afterrender를 사용했고 그 방법으로 '선택'컨트롤을 발견하고 플러그인을 호출했습니다.

다른 문제와 비슷한 방식으로 부트 스트랩 콤보 상자 컨트롤을 사용해야 할 때마다 문제를 해결하고 싶습니다. 그래서, 나는 Custom Bindings에 대해 연구 해왔고 (나는 이미 그것을 해 놓았어야했다.), 나의 stuation에서 custom bindings을 어떻게 사용할 수 있는지에 대한 질문을했다.

이 기사에서는 부트 스트랩 선행 컨트롤에 대한 사용자 지정 바인딩을 만들었습니다. 나는 콤보 박스와 비슷한 것을 만들 수있다. 하지만 컨트롤이 렌더링 된 후에 만 ​​호출 할 수 있습니다. 그래서, KO가 즉시 바인딩 대신 "afterrender"사용자 지정 바인딩을 수행하도록 지정하는 방법이 있습니까? 이렇게하면 select 컨트롤이 렌더링되고 select 컨트롤을 통해 사용자 정의 바인딩에서 플러그인을 호출 할 수 있습니다.

다음은 몇 가지 추가 정보입니다.

나는 템플릿

<table> 
     <tbody data-bind='template: {name: "editorRowTemplate", foreach: rules, afterRender: function(data) {{$root.view.templateRendered(data) } }'> </tbody> 
</table> 

를 사용하는 테이블이 내가 가지고 선택을 생성 내가 (등 KnockoutDropDownListFor) 내 자신의 HTML 헬퍼가이

<script id="editorRowTemplate" type="text/html"> 

    <tr class="dataRow" data-bind="attr: { id: 'EditorRow' + $index() }"> 
     <td> 
      <div class="editor-field"> 
       @Html.KnockOutDropDownListFor(rule => ruleTemplate.ReserveWordId, new List<SelectListItem>(), null, 
                new { @class = "combobox", data_bind = "options: $root.ReserveWords, optionsText:'Name', optionsValue:'ReserveWordId', attr : {id: $index(), name: $index()}" }, ((int)this.Model.Prefix).ToString()) 

       @Html.KnockOutValidationMessageFor(rule => ruleTemplate.ReserveWordId, "*", new { data_bind = "attr : { 'data-valmsg-for': $index()}" }, ((int)this.Model.Prefix).ToString()) 
      </div> 
     </td> 
    </tr> 
</script> 

과 유사 템플릿 지정된 KO 바인딩으로 제어.

앞으로 나아갈 수있는 좋은 방법이 무엇인지 제안 해주십시오. 자세한 정보가 필요하면 알려주세요.

Answer 1

나는이 질문을 완전히 이해하고 있는지 확신 할 수 없다. 그러나 MVC 헬퍼가 렌더링되는 것을 기다리는 것에 대해 걱정할 필요가 없습니다. 서버 측에서 이런 일이 일어나고 클라이언트 측에서 녹아웃이 일어나기 때문입니다.

$ (document) .ready (function() {...}); DOM을로드하기 전에로드를 확인하고 싶다면.