녹아웃의 사용자 지정 드롭 다운 목록

Question

사용자 정의 드롭 다운을 만들려고합니다. 모든 요소를 ​​가져올 메서드 이름을 가지며 녹아웃 모델 바인딩 전에 목록이 채워질 때까지 기다려야합니다. 주어진 메소드에서 가져온 후 기본 동작을 시작합니다.

지금까지 주어진 방법으로 데이터를 채우는 데 성공했습니다. 하지만 문제는 내 init 메소드가 비동기 작업을 완료 할 때까지 녹아웃 바인딩을 기다리는 방법을 알려주는 것입니다. Extender이 작업을 수행 할 수

ko.bindingHandlers.serviceMethod = { 
     init: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var serviceName, optionsValue, optionsText, value, optionsCaption, isCompleted; 

     if (element.nodeName == 'SELECT') {     
      optionsValue = allBindings().optionsValue || 'value'; 
      optionsText = allBindings().optionsText || 'text';     
      serviceName = valueAccessor();    

      var l = $(element); 
      serviceName.apply().done(function (results) { 
       l.empty(); 
       $.each(results.List, function (j, result) { 
        l.append($("<option />").val(result[optionsValue] || '').text(result[optionsText] || '')); 
       })      
      }); 
     } 
    }, 
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 

     //what to do now in order to let knockout wait for list to be populated 
    } 
} 

내 바인딩

는, 데이터를 사용할 수있을 때까지

<select name="state" data-bind="serviceMethod:registrationService.getAllStates,value: model.state" id="ddlState"></select> 

Answer 1

당신은 입력 요소를 비활성화 할 수 있습니다.

마크 업 :

<select data-bind="serviceMethod:getOptions, options: options, enable:options.enable></select> 

뷰 모델 :

function viewModel(){ 
    this.options=ko.observableArray().extend({ enabled:false});  
} 

바인딩 핸들러 :

ko.bindingHandlers.serviceMethod = { 
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var getOptionsFunction=valueAccessor(); 
     // deferred implemented as a callback 
     getOptionsFunction(function(r){ 
      allBindings().options(r);    
      // call extender observable to enable the input 
      allBindings().options.enabled(true); 
     }); 
    }, 
    update:function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
    }  

증량제 :

ko.extenders.enabled = function(target, option) { 
    target.enabled=ko.observable(option); 
    return target; 
}; 

,

fiddle

참고 : 내가보기 모델에 논리를 움직일 것입니다, 우리의 프로젝트에 우리가 viewModels에 가야 바인딩 처리기에 너무 많은 코드를 넣어 실수를했다.

Answer 2

는

ko.extenders.asyncList = function (target, option) { 

    var _callbackF = []; 
    var result = ko.computed({ 
     read: function() { 

      if (!target.populated()) { 
       option.apply().done(_addintoList); 
      } 
      return target; 
     }, 
     deferEvaluation: true 
    }); 

    target.populated = ko.observable(false); 
    target.refresh = function() { 
     target.populated(false); 
    }  
    var _addintoList = function (aData) { 

     ko.utils.arrayForEach(aData.List, function (item) { 
      target.push(item); 
     }); 

     if (_callbackF != undefined) { 
      $.each(_callbackF, function (_f) { 
       _f.apply(); 
      }); 
      _callback = undefined; 
     } 
     target.populated(true); 
    } 
    return result(); 
} 

다음

staticData: function() { 
    var self = this; 
    var def = $.Deferred(); 
    self.allStates = ko.observableArray().extend({ asyncList: registrationService.getAllStates }); 
    self.hearUsAll = ko.observableArray().extend({ asyncList: registrationService.getAllSources });; 
    self.populated = ko.computed({ 
     read: function() { 
      if (this.allStates.populated() && this.hearUsAll.populated()) { 
       return def.resolve(true); 
      } 
      return def; 
     }, 
     deferEvaluation: true 
    }, this); 

처럼이 확장을 사용하여 모델을 볼

같은 녹아웃은 내 주요 기능은

this.staticData.populated().done(
     function (d) { 
      ko.applyBindings({ model: self.dataModel, staticData: self.staticData, view: self.viewModel }) 
     });