녹아웃 부품 등록을 중앙 집중화하는 방법은 무엇입니까?

Question

면책 조항 : 간략한 설명으로서 사과드립니다. 내 문제를 간단히 설명하고자합니다.

기본 녹아웃 구성 요소를 만들었지 만 완전히 정상적으로 작동했지만 매번 다른 구성 요소에 내 구성 요소를 사용하고 싶습니다. 작동하기 전에 소비자/viewmodel에 필요할 필요가 있습니다. mycomponent가 알려지지 않음을 불평 할 것입니다.) 그것은 내가 DRY 원리를 위반한다고 생각하게 만듭니다. 대신 나는 그것이 녹아웃의 일부가되고 싶다.

시나리오 :를 MyComponent 등록

/*mycomponent registration */ 

define(
[ 
    "knockout", 
    "text!components/my-component-template.htm", 
    "components/my-component-view-model" 
], 
function (ko, myComponentTemplate, MyComponentViewModel) 
{ 
    "use strict"; 

    ko.components.register("mycomponent", 
    { 
     viewModel: 
     { 
      createViewModel: function (params) 
      { 
       return new MyComponentViewModel(params); 
      } 
     }, 

     template: myComponentTemplate 
    }); 
}); 

그리고 정상 등을 요구하여 사용

예 1 :

/* template of other consumer */ 

<ul data-bind='normal knockout function'> 
    <li> 
    <a href='#sample-only'></a> 
    <!-- ko component: { name: "mycomponent", params: { data : $data } } --> 
    <!-- /ko --> 
    </li> 
</ul> 

/* other view model 1*/ 

define(
[  
    "knockout", 
    "mycomponent" --> I want to eliminate this and make it part of knockout 
], 
function() 
{ 
    "use strict"; 
    /* Normal coding stuff here */ 
}); 

예 2 :이 샘플에 대한 다른 척 수 목적들

/* other template that want to use mycomponent */ 
<ul data-bind='other template'> 
    <li> 
    <a href='#sample-only'></a> 
    <!-- ko component: { name: "mycomponent", params: { data : $data } } --> 
    <!-- /ko --> 
    </li> 
</ul> 

/* other view model 2 */ 

define(
[   
    "knockout", 
    "mycomponent" --> I want to eliminate this and make it part of knockout 
], 
function() 
{ 
    "use strict"; 
    /* Normal coding stuff here */ 
}); 

custom loader의 작동 방식을 이해하고 실험을 시도했으며 위의 예제와 같이 createViewModel을 통해 수동으로 뷰 모델을 인스턴스화하는 링크를 전혀 실현하지 못했습니다.

/* knockout-extension.js */ 
define(
[   
    "<path>/mycomponent" --> Found in Scenario mycomponent registration above 
], 
function() 
{ 
     /* do nothing*/ 
}) 


/* Index */ 

<script type="text/javascript"> 

require({ 
      baseUrl: '@Url.Content("~/Content/js")', 
      waitSeconds: 45, 
      paths: 
      { 
       /* 
       . other dependencies here        
       */ 
       "knockout" : "<path>/knockback-extensions" 
      } 
}); 

하지만이 : 그럼, 내가 생각했던 또 다른 방법은 knockout-extension.js 핸들러 등을 결합 내 구성 요소와 손님 같은 다른 녹아웃 파일을 등록하는 데 사용하고 아래처럼 내 index.cshtml에서 그것을 필요로 훨씬 더 간단 작성입니다 접근 방식으로 인해 해결할 수없는 link과 같은로드 시간 초과 문제가 발생합니다.

누군가 내게 작은 불을 털어 놓을 수 있습니까? 어떻게하면 내 구성 요소를 필요로하는지 반복적으로 제거 할 수 있고 소비자에게 전달할 수는 있지만 대신 내 녹아웃 부분에 포함되기를 원합니다. 나는 그것을 소비자에게 요구하지 않고 하나의 파일에 등록을 중앙 집중시키고 싶다. 지금 으로서는 꽤 고통 스럽습니다.

Answer 1

나는 내부 정의 기능을 요구할 수있는이 link에 실마리가 있습니다. 뷰 모델에 대한 내 문제를 해결합니다.

define(
[ 
    "knockout" 
    "require"   
], 
function (ko, require) 
{ 
    "use strict"; 

    require(
    [ 
     "components/my-component-view-model" 
    ], 
    function (MyComponentViewModel) 
    { 
     ko.components.register("mycomponent", 
     { 
      viewModel: 
      { 
       createViewModel: function (params) 
       { 
        return new MyComponentViewModel(params); 
       } 
      }, 

      template: { require : 'text!template-path-here' } 
     }); 
    }); 
});