Javascript 将项目绑定到引导菜单

我相信这对于一个有经验的淘汰赛用户来说很简单，但我不是。基本上，我想创建一个表名数组，我想把它们放在一个引导按钮菜单中，当单击一个时，我想获取单击的值。目前，我甚至无法使该项显示在按钮菜单中。我已经创建了一个我试图实现的目标：

选择要填充的表
目录




$（函数（）{
var main=newviewmodel（）；
ko.applyBindings（main，$（'ko'）[0]）；
});
功能选项卡（数据）{
this.tbl=ko.可观察（data.tbl）；
}
函数viewModel（）{
var self=这个；
self.Tables=ko.observearray（）；
push（新标签（{tbl:“Bungle”}，{tbl:“Zippy”}））；
}
//self.getTableName
//警告显示表名！

干杯：）

$（函数（）{
var main=newviewmodel（）；
ko.applyBindings（main，$（'ko'）[0]）；
});
功能选项卡ViewModel（数据）{
var self=这个；
self.Name=ko.observable（数据）；
self.onClick=函数（选项卡）{
window.alert（self.Name（））；
}
回归自我；
}
函数viewModel（）{
var self=这个；
self.Tables=ko.observearray（）；
self.Tables.push（新的tabViewModel（“Bungle”）；
self.Tables.push（新的tabViewModel（“Zippy”）；
}
下拉示例

我为你更新了小提琴

---

先生，您是一位传奇人物！谢谢：）

<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!

$(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>