knockout.js 페이지로드시 드롭 다운 목록을 바인딩하지 않음

Question

관찰 가능한 배열 드롭 다운 목록에 바인딩되어 있습니다. ASP.NET MVC HTML Helpers를 통해 페이지로드시 dropdownlist가 채워지지만 observable 배열은 []로 설정되어 있으므로 모든 것을 제거합니다. 페이지로드 또는 초기 적용 바인딩에서 모든 것을 제거하지 않는 방법이 있습니까?

Answer 1

관찰 가능한 배열의 옵션을 나중에 설정하려고하는 것 같습니다 (AJAX 호출에서 아마도?). 넉 아웃에는 내장 된 방법이 없습니다. 적어도 세 가지 옵션이 있다고 생각합니다.

1. 확실한 방법은 선택 목록 대신 관찰 가능한 배열을 작성하는 것입니다. 그런 다음 녹아웃은 올바른 일을하고 드롭 다운 목록을 채 웁니다.

2. 는 빈 배열을 바인딩 options를 래핑하지만 무시하는 사용자 지정 바인딩을 사용

   ko.bindingHandlers.optionsNotBlank = { 
       update: function (element, valueAccessor, allBindingsAccessor) { 
        var value = ko.utils.unwrapObservable(valueAccessor()); 
        if (value.length) 
         ko.bindingHandlers.options.update(element, valueAccessor, allBindingAccessor); 
       } 
   }; 
   

3. 설정 options 동적 드롭 다운 목록에 바인딩. 이것은 게시 된 기능이 아니지만 내 보낸 녹아웃 메서드를 사용합니다. 표준 data-bind 특성을 사용하는 대신 ko.applyBindingsToNode 메서드를 사용하고 관찰 가능 배열을 채운 후에 바인딩 개체를 전달합니다. 그래도 ko.applyBindingsToNode 번으로 전화하는 데주의해야합니다.

   viewModel.myArrayOfItem(newValues); 
   if (!boundDropDown) { 
       ko.applyBindingsToNode(document.getElementById("mydropdown"), { options: viewModel.myArrayOfItems }, viewModel); 
       boundDropDown = true; 
   } 
   

편집 :

여기에 "더러운"플래그를 사용하여 의견을 기반으로 네 번째 옵션들 :

ko.bindingHandlers.optionsNotBlank = { 
     update: function (element, valueAccessor, allBindingsAccessor) { 
      var value = ko.utils.unwrapObservable(valueAccessor()), 
       isDirty = element._isDirty; 
      if (isDirty || value.length) { 
       element._isDirty = true; 
       ko.bindingHandlers.options.update(element, valueAccessor, allBindingAccessor); 
      } 
     } 
    };