knockout 사용자 정의 바인딩으로 래핑 된 객체에서 함수를 어떻게 표시합니까?

Question

현재 Durandal에서 Bing Maps 컨트롤을 사용하기 쉽도록 맞춤형 바인딩 인 Bing Maps KO을 사용하고 있습니다.

지금까지 정보 상자를 허용하도록 사용자 지정 바인딩을 확장 했으므로 뷰 모델 및 정보 상자 업데이트에서 관찰 가능 값을 설정하기 만하면됩니다.

이제 사용자 지정 바인딩에 포함 된지도 개체 중 하나에서 함수를 호출 할 수 있기를 바랍니다.

지도를 특정 지점까지 확대하고 싶습니다. 지도의 중심점을 설정하고 싶지는 않지만지도의 애니메이션을 처리하는 함수를 그 지점으로 호출하고 싶습니다.

이것은 뷰 모델에서 설정 한 관찰 가능 필드를 가짐으로써 달성 될 수 있습니다. 그러면 사용자 정의 바인딩에 업데이트 함수가 호출되고 값을 가져 와서 메서드를 호출 한 다음 관찰 가능을 다시 비어있게 재설정합니다.

MVVM을 사용하는 경우 유지 보수해야하는 분리 선 외부에서 실제로 작동하지 않아야합니다.

함수 구문을 사용하여이 작업을 수행하는 다른 방법이 있으므로 발생 상황을보다 정확하게 설명 할 수 있습니다. (값을 설정하는 대신 일련의 작업을 요청합니다.)

Answer 1

이 작업을 수행하는 한 가지 방법은 이벤트를 사용하는 것입니다.

사용자 지정 바인딩에 이벤트 이름을 전달하고 해당 이벤트를 구독 할 수 있습니다.

Durandal을 사용하고 있기 때문에 일반적으로 built-in event system을 사용하지만 jsFiddle에는 KnockoutJS 만 사용할 수 있으므로 다음 예제에서는 작은 위치 PubSub library을 사용합니다.

이 코드는 프로덕션에 투입되는 코드가 아닌 예제 코드입니다.

jsFiddle

//PubSub// 
(function(a,c,b){if(typeof module!=="undefined"){module.exports=b(a,c)}else{if(typeof define==="function"&&typeof define.amd==="object"){define(b)}else{c[a]=b(a,c)}}})("radio",this,function(b,c){function a(d){a.$.channel(d);return a.$}a.$={version:"0.2",channelName:"",channels:[],broadcast:function(){var f,j=this.channels[this.channelName],d=j.length,g,h,e;for(f=0;f<d;f++){g=j[f];if((typeof(g)==="object")&&(g.length)){h=g[0];e=g[1]||c}h.apply(e,arguments)}return this},channel:function(d){var e=this.channels;if(!e[d]){e[d]=[]}this.channelName=d;return this},subscribe:function(){var f=arguments,j=this.channels[this.channelName],g,e=f.length,h,d=[];for(g=0;g<e;g++){d=f[g];h=(typeof(d)==="function")?[d]:d;if((typeof(h)==="object")&&(h.length)){j.push(h)}}return this},unsubscribe:function(){var g=arguments,k,h,n=this.channels[this.channelName],f=g.length,e=n.length,m=0,d;for(k=0;k<f;k++){m=0;e=n.length;for(h=0;h<e;h++){d=h-m;if(n[d][0]===g[k]){n.splice(d,1);m++}}}return this}};return a}); 
//PubSub// 

ko.bindingHandlers.customBinding = { 
    _textBoxes: {}, 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var _valueAccessor = valueAccessor(); 

     var textBox = document.createElement("input"); 
     textBox.type = "text"; 
     element.appendChild(textBox); 

     ko.bindingHandlers.customBinding._textBoxes[element.id] = textBox; 

     if(_valueAccessor.clearEventName) { 
      radio(_valueAccessor.clearEventName).subscribe(function() { 
       _valueAccessor.text(""); 
      }); 
     } 

     if(_valueAccessor.text) { 
      textBox.onchange=function() { _valueAccessor.text(textBox.value); }; 
     } 
    }, 
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var _valueAccessor = valueAccessor(); 

     if(_valueAccessor.text) { 
      ko.bindingHandlers.customBinding._textBoxes[element.id].value = _valueAccessor.text(); 
     } 
    } 
}; 

var viewModel = { 
    text: ko.observable("Inital value."), 
    doClear: function() { 
     radio('clear').broadcast(); 
    }, 
    doReset: function() { 
     viewModel.text("Reset value."); 
    } 
}; 

ko.applyBindings(viewModel);