녹아웃으로 항목을 부트 스트랩 메뉴에 바인딩

Question

경험 많은 녹아웃 사용자에게는 이것이 간단하지만 나는 그렇지 않다는 것이 확실합니다. 기본적으로 나는 테이블 이름의 배열을 만들고 싶습니다. 그리고 이것들을 부트 스트랩 버튼 메뉴에 넣고 싶습니다. 클릭 할 때 클릭 한 값을 잡고 싶습니다. 현재 버튼 메뉴에 항목을 표시 할 수 없습니다. 내가 달성하기 위해 노력하고있어의 검은 제비 갈매기 jsfiddle을 만들었습니다

https://jsfiddle.net/martin461/191arw3u/

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 

<div id="ko"> 
    <form> 
    <div class="panel panel-default" style="padding: 15px 10px 0px 15px;" id=""> 
     <div class="form-group row"> 
     <label for="inputTable" class="col-lg-3 col-form-label">Select a Table to populate</label> 
     <div class="controls form-inline"> 
      <div class="col-lg-6"> 
      </div> 
      <button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle" style="min-width: 400px;">table of things <span class="caret"></span></button> 
      <ul class="dropdown-menu scrollable-menu" style="min-width: 400px; margin-left:15px; max-height: 300px; height: auto; overflow-x: hidden;" role="menu" data-bind="foreach: Tables"> 
      <li>    
       <!-- to do <a role="menuitem" tabindex="-1" href="#" data-bind="text: tbl, click: getTableName"></a> --> 
       <a role="menuitem" tabindex="-1" href="#" data-bind="text: tbl"></a> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </form> 
</div> 



$(function() { 
    var main = new viewModel(); 

    ko.applyBindings(main, $('#ko')[0]); 
}); 

function tabs(data) { 
    this.tbl = ko.observable(data.tbl); 
} 

function viewModel() { 
    var self = this; 
    self.Tables = ko.observableArray(); 
    self.Tables.push(new tabs({tbl: "Bungle"}, {tbl: "Zippy"})); 
    } 
    //self.getTableName 
    // alert show the table name! 

건배 : 내가 당신을 위해 바이올린을 업데이트

Answer 1

$(function() { 
    var main = new viewModel(); 
    ko.applyBindings(main, $('#ko')[0]); 
}); 

function tabViewModel(data) { 
    var self = this; 
    self.Name = ko.observable(data); 
    self.onClick = function(tab) { 
    window.alert(self.Name()); 
    } 
    return self; 
} 
function viewModel() { 
    var self = this; 
    self.Tables = ko.observableArray(); 
    self.Tables.push(new tabViewModel("Bungle")); 
    self.Tables.push(new tabViewModel("Zippy")); 
} 

<div class="dropdown"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" data-bind="foreach: Tables"> 
    <li><a href="#" data-bind="text: Name, click: onClick"></a></li> 
    </ul> 
</div> 

합니다.

https://jsfiddle.net/191arw3u/12/