nav-tab을 만들려고 할 때 foreach 루프에서 $ root가 정의되지 않았습니다.

Question

knockout으로 foreach 루프를 만들려고하는데 성공했지만 다른 관찰 가능한 변수에서 href를 반복하려고합니다. 콘솔 만약 내가 제대로 이해하고

<ul class="nav nav-tabs" data-bind="foreach: season"> 
    <li><a data-toggle="tab" data-bind="html: $data, attr: { href: '#'+$root.ids}"></a></li> 
</ul> 

<div class="tab-content" data-bind="foreach: season"> 
    <div class="tab-pane fade in active" data-bind="attr: { 'id': $root.ids}"> 
     <h3 data-bind="text: $data"></h3> 
    </div> 
</div> 

Answer 1

, 당신은와 앵커를 만들 :이 내가

var vm = function() { 
    this.season = ko.observable(["A", "B", "C", "D", "E", "F", "G", "H"]); 
    this.ids = ko.observable(["a", "b", "c", "d", "e", "f", "g", "h"]) 
}; ko.applyBindings(vm); 

는 HTML이 무엇

"형식 오류 $ 루트는 정의되지 않는다"을 #a, #b 등으로 설정하고 tab-pane div의 ID를 a, b 등으로 설정하십시오.

먼저 함수가 아닌 ko.applyBindings에 객체를 전달해야합니다.

그래서, 당신은 두 번째 객체를

var vm = function() { 
    this.season = ko.observable(["A", "B", "C", "D", "E", "F", "G", "H"]); 
    this.ids = ko.observable(["a", "b", "c", "d", "e", "f", "g", "h"]) 
}; 
// new vm() creates an object with season and id keys 
ko.applyBindings(new vm()); 

를 만드는 생성자 함수에 new 연산자를 사용하여, 귀하의 경우

var vm = { 
    season: ko.observable(["A", "B", "C", "D", "E", "F", "G", "H"]), 
    ids: ko.observable(["a", "b", "c", "d", "e", "f", "g", "h"]) 
} 
ko.applyBindings(vm); 

또는

객체 리터럴을 사용할 수 있습니다 모든 href에 #으로 관측 할 수있는 ids이 추가됩니다. 대신 $index을 사용하여 컨텍스트에서 현재 대문자에 해당하는 작은 글자를 가져올 수 있습니다. $index은 현재 season 배열 항목의 색인을 나타냅니다. 내가 질문을 따라 잘 모르겠어요

var vm = function() { 
 
    this.season = ko.observableArray(["A", "B", "C", "D", "E", "F", "G", "H"]); 
 
    this.ids = ko.observable(["a", "b", "c", "d", "e", "f", "g", "h"]) 
 
}; 
 

 
ko.applyBindings(new vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<ul class="nav nav-tabs" data-bind="foreach: season"> 
 
    <li> 
 
    <a data-toggle="tab" data-bind="text: $data, attr: { href: '#'+$root.ids()[$index()]}"></a> 
 
    </li> 
 
</ul> 
 

 
<div class="tab-content" data-bind="foreach: season"> 
 
    <div class="tab-pane fade in active" data-bind="attr: { 'id': $root.ids()[$index()]}"> 
 
    <h3 data-bind="text: $data"></h3> 
 
    </div> 
 
</div>