녹아웃 템플릿 인수 목록을 사용하여 바인딩

템플릿 바인딩을 사용하여 DIV를 기본 div에 바인딩합니다.녹아웃 템플릿 인수 목록을 사용하여 바인딩

$(function() { 
function MyViewModel() { 
     this.collection = { 
     List: [{ name: 'amar', progress: 20 }, 
       { name: 'vijay', progress: 50}] 
     } 
} 
createDiv(); 
ko.applyBindings(new MyViewModel()); 
}); 

var createDiv = function (ItemList) { 
    var maindiv = $("<div data-bind=\"template: { name: 'task-template', foreach: collection.List }\" ></div>"); 
    maindiv.appendTo("#TestDiv"); 
} 
<script type="text/html" id="task-template"> 
    <div id="Div1" style="width: 95px; height: 31px; border-width: 1px; border-style:solid; background-color: #00FF00;" data-bind="text: name" ></div> 
</script>

위의 코드는 정상적으로 작동합니다. 난 그냥 "createDiv"메서드의 인수 "ItemList"아래의 데이터 바인딩 템플릿에서 사용할 수있는 방법을 알고 싶습니다.

var maindiv = $("<div data-bind=\"template: { name: 'task-template', foreach: ItemList }\" ></div>");

템플릿의 foreach에서 MyViewModel의 데이터를 사용하고 싶지는 않습니다. 단지 거기에 내 메소드 인수를 사용하고 싶습니다. 이 일을 할 수있는 방법이 있습니까?

출처

2012-03-13 Amar

나는 viewmodel을 참조하지 않고 성취하고자하는 일을하는 방법이 있다고 생각하지 않습니다. 또한 이렇게함으로써 바인딩 기능을 파괴함으로써 녹아웃의 디자인 목표를 깨뜨릴 수 있습니다. javascript를 통해 수동 요소/html 생성을 원한다면 knockout을 사용하지 않고 동일한 (또는 적은) 양의 코드로 수행 할 수 있습니다. 그냥 그게 가치있는 일을 저쪽에 던져. –

@QuintinRobinson - 답변으로 제출해야합니다. 이것은 KO의 잘못된 사용법입니다. viewModels 또는 subViewModels를 통해 수행되어야합니다. – madcapnmckay

사실, 한 가지 더 명확히 해 드리겠습니다. createDiv 함수 인수의 ItemList는 이미 viewModel에 있습니다.이 뷰는 ViewModel 계층 내부에 있으며 createDiv 메서드 내부에서 정확히 알 수 없습니다. 내가 제공 한 코드는 우리가 가진 단순화 된 버전입니다. 우리는 UI 생성 로직의 특정 부분을 추상화했으며 createDiv는 항목 목록 (이미 viewModel에 있음)을 가져 와서 div를 만드는 추상화를 나타냅니다. – Amar

해당 div에 applyBindings을 개별적으로 호출 할 수 있습니다.

$(function() { 
function MyViewModel() { 
     this.collection = { 
     List: [{ name: 'amar', progress: 20 }, 
       { name: 'vijay', progress: 50}] 
     } 
} 
var vm = new MyViewModel(); 
ko.applyBindings(vm); 
createDiv(vm.collection); 
}); 

var createDiv = function (ItemList) { 
    var maindiv = $("<div data-bind=\"template: { name: 'task-template', foreach: ItemList }\" ></div>"); 
    maindiv.appendTo("#TestDiv"); 
    ko.applyBindings({ItemList: ItemList}, maindiv[0]); 
} 
<script type="text/html" id="task-template"> 
    <div id="Div1" style="width: 95px; height: 31px; border-width: 1px; border-style:solid; background-color: #00FF00;" data-bind="text: name" ></div> 
</script>

출처

2012-05-01 21:33:09

녹아웃 템플릿 인수 목록을 사용하여 바인딩

답변

관련 문제