2012-07-17 3 views
4

내 애플리케이션의 상태가 변경 될 때 런타임에 템플릿을 동적으로 변경하려는 뷰 모델이 있습니다. 내 솔루션을 생각 해낼 때이 link 을 언급했습니다. 내 HTML 페이지에서녹아웃을 사용하는 동적 템플릿

내가보기 모델의 목록에 바인딩 사업부가 있습니다

<div class="app" 
    data-bind="template: {name: templateSelector, foreach: viewModelBackStack}"> 
</div> 

그리고 내 templateSelector 방법은 다음과 같습니다

this.templateSelector = function(viewModel) 
{ 
    if (!_itemTemplate) 
    {   
     _itemTemplate = ko.computed(function() {return this.template();}, viewModel); 
    } 

    return _itemTemplate(); 
} 

var _itemTemplate; 

로 볼 수 있습니다, I viewModel의 템플릿을 반환하는 계산 된 observable을 생성하고 있습니다.

내 뷰 모델은 다음과 같습니다 : 나는 아약스 호출의 결과로 템플릿의 값을 변경하고

function MyViewModel 
{ 
    this.template = ko.observable("MyTemplate"); 
} 

이 완료되고

과 나뿐만 아니라 제대로이라고 관찰 계산 된 것을 볼 (전에서 경고를 배치 거기 그것을 확인하기 위해), 그러나 html 바인딩 내 viewmodel의 템플릿을 업데이 트하지 않습니다. 어떤 도움을 주시면 감사하겠습니다.

업데이트 : 작동하지 않는 버그를 발견했습니다. 기본적으로 knockout.js를 포함하기 전에 jquery.tmpl 플러그인을 포함 시켰습니다. jquery.tmpl을 제거하는 것이 트릭을 만들었습니다!

답변

3

AJAX 호출의 결과로 관찰 가능한 템플릿을 업데이트하는 부분에 있지 않으면 코드에 문제가 표시되지 않습니다. 보기 모델에 대한 참조가 있고 관찰 가능 vm.template(newValue);으로 설정하고 관찰 가능을 재생성하지 않는지 확인하십시오. 주의 할 http://jsbin.com/ipijet/5/edit#javascript,html,live

한 가지 바인딩이 이미 관찰 계산의 컨텍스트 내에서 실행되는 것을, 그래서 당신의 templateSelector 함수 내 자신을 만들 필요가 :

는 여기에 귀하의 코드 작업이다. http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html

+0

감사 :

this.getTemplate = function(data) { return data.template(); }; 
다음

http://jsbin.com/ipijet/3/edit#javascript,html,live

나는이 주제에 다시 잠시 동안 쓴 기사입니다 :

당신은 단순히 직접처럼 관찰 반환하는 함수를 만들 수 있습니다! 작동 방식 : http://jsbin.com/ulosew/25/edit –