ko.applyBindings() 호출 후 구성 요소 바인딩을 적용하는 방법

ko.applyBindings() 호출 후에 구성 요소 바인딩을 적용 할 수 있습니까?ko.applyBindings() 호출 후 구성 요소 바인딩을 적용하는 방법

요점은, 필자는 requireJS를 사용하여 내 모듈/구성 요소를 비동기 적으로로드합니다. 그렇다면 모든 바인딩이 등록되어 있다는 것을 어떻게 알 수 있습니까?

ko.applyBindings(); 

ko.components.register('my-component', 
    { 
     viewModel: function() { 
      this.name = ko.observable('My Name'); 
     }, 
     template: '<input type="text" data-bind="value: name"></input>' 
    } 
); 

// Moving it here, it works: 
// ko.applyBindings();

출처

2014-09-08 Tarion

는 동적으로 이해하고 부하 구성 요소에 사용할 수있는 조각의 몇 가지가 있습니다.

1 custom component loader

당신이 필요로하는 파일 구성 요소 이름에서 이해하는 구성 요소 로더를 만들 수 있습니다.

예를 들어, my-으로 시작하는 모든 구성 요소는 규범에 따라 components 디렉토리에서 필요로한다고 가정 해 보겠습니다.

그것은처럼 보일 수있다 : 기본 로더가 (아직 등록되지 않음) 구성 요소를 찾을 수없는 경우,이 하나의 킥 것

2- 우리는 여전히해야

//add a loader to the end of the list of loaders (one by default) 
ko.components.loaders.push({ 
    getConfig: function(name, callback) { 
     var widgetName; 

     //see if this is one of our widgets 
     if (name.indexOf("my-") > -1) { 
      widgetName = name.substr(3).toLowerCase(); 

      //provide configuration for how to load the template/widget 
      callback({ 
       require: "components/" + widgetName 
      }); 
     } else { 
      //tell KO that we don't know and it can move on to additional loaders 
      callback(null); 
     } 
    }, 
    //use the default loaders functionality for loading 
    loadComponent: ko.components.defaultLoader.loadComponent 
});

. custom elements을 처리하십시오. 등록이 모두 취소되어 실행됩니다. 이 설명서에서는 요소 태그를 구성 요소 이름으로 동적으로 변환하기 위해 재정의 될 수있는 ko.components.getComponentNameForNode 메서드에 대해 설명합니다. ,, http://jsfiddle.net/rniemeyer/tgm8wn7n/

을 또한 IE6-8이 here 경고의 주를 가지고 : 여기 require.js과 함께이를두고 바이올린이

var existingGetComponentNameForNode = ko.components.getComponentNameForNode; 
ko.components.getComponentNameForNode = function(node) { 
    var tagNameLower = node.tagName && node.tagName.toLowerCase(); 

    //if we found one of our tags, then use it as the component name 
    if (tagNameLower.indexOf("my-") > -1) { 
     return tagNameLower; 
    } 

    // call the original 
    return existingGetComponentNameForNode.apply(this, arguments); 
};

: 우리의 경우

,이 같이 볼 수 있었다 이는 맞춤 요소를 동적으로 이해하는 데 영향을 미치기 때문입니다.

또는 UI에서 해당 구성 요소가 바인딩되기 전에 모든 구성 요소가 등록되었는지 확인해야합니다 (초기 applyBinding을 사용할 때가 아니라 구성 요소를 바인딩해야하는 즉시).

는

출처

2014-09-08 20:06:09

모든 구성 요소가 바인딩이 공격하기 전에 등록 보장하기 위해 RP 메이어의 제안을 확장하기 위해, 나는 구성 요소를로드하는 데 과거에 성공적으로이 작업을 수행 한 난 단지 거의 필요 :

당신은 구성 요소가 결합되도록 할 수 있습니다 루트 또는 컨트롤러 스타일 최상위 모델의 속성 내에서 구성 요소를 사용하여 구성 요소를 등록하고 with 바인딩에 배치하여 구성 요소를 래핑하기 전에 시도하지 않습니다. KO는 속성이 할당 될 때까지 with 안의 어떤 것도 평가하지 않습니다.

예를 들어 단어보다는 설명하기가 쉽습니다!

마크 업 :

<!-- ko with: Container --> 
    <my-component>replaceme</my-component> 
<!-- /ko -->

코드 :

그래서 여기

는 다음 구성 요소에 의존하는 코드를 나중에로드를 시뮬레이션하기 위해 타임 아웃을 사용하여, applyBindings 초기라는 것을 보여주는 코드입니다

function Model() 
{ 
     ko.components.register('my-component', 
       { 
         viewModel: function() { 
           this.name = ko.observable('My Name'); 
         }, 
         template: '<input type="text" data-bind="value: name"></input>' 
       } 
     ); 
} 

function RootModel() 
{ 
     this.Container = ko.observable(); 

     this.load = function() 
     { 
       this.Container(new Model()); 
     }; 
} 

var rootmodel = new RootModel(); 
ko.applyBindings(rootmodel); 

setTimeout(function() { rootmodel.load(); }, 1000);

작동하는 피들 : http://jsfiddle.net/whelkaholism/dhaox1ae/

출처

2015-03-25 15:24:50 Whelkaholism

ko.applyBindings() 호출 후 구성 요소 바인딩을 적용하는 방법

답변

관련 문제