如何使用 KnockoutJs 实现 List 的级联下拉功能

Question

HTML：

 <div>
    <div id="filter-drop-down" tabindex="1">
        <span data-bind="text:selected_Auth()"></span>
        <ul class="dropdown" data-bind="foreach:selectList">
            <li><a href="#" data-bind="text:name.toLowerCase(),click:$parent.addToRightList,css:{'selected-filter':$parent.selected_Auth==name}"></a></li>
        </ul>
    </div>
    <div id="filter-drop-down1" data-bind="with:rightList" tabindex="1">
        <span data-bind="text:selected_Book.toLowerCase()"></span>
        <ul class="dropdown" data-bind="foreach:selectList">
            <li><a href="#" data-bind="text:DscName.toLowerCase(),click:$parent.selected_Book.bind($root,DscName),css:{'selected-filter':$root.selected_Book()==DscName}"></a></li>
        </ul>
    </div>
</div>

JS：

function view_model() {
  var self = this;
  self.all_consultants = ko.observableArray();
  self.selected_Auth = ko.observable("all Author");
  self.selected_Book = ko.observable("all books");
  self.selectList = ko.observableArray([{
    name: "J.K R",
    DscName: [
      "HP1", "HP2", "HP3"
    ]
  }, {
    name: "shakespeare",
    DscName: [
      "Hamlet", "Othello"
    ]
  }]);

  //if (self.auth_header()) {
  //  get_list_data();
  //}

  self.rightList = ko.observable();
  self.addToRightList = function(list) {
    self.rightList(list);
  };

}
ko.applyBindings(new view_model());

在第一个列表上需要类似下拉功能的作者选择用书籍填充 2 个列表，如果只有 1 本书，则应自动选择它。

Answer 1

您的问题没有得到太多帮助的原因是它给人的印象是“为我编写一些代码”，而不是“我正在尝试这样做并遇到一个特定问题”。 StackOverflow 旨在帮助您理解事物，而不仅仅是编写一些代码让其他人让它工作。

您提供的代码有很多错误。我编辑了您的问题以消除语法错误，以便它至少可以运行。下面我已经解决了一些问题来建立你正在寻找的依赖关系。

注意事项：

• 你不能直接在 observable 上使用toLowerCase，你必须得到它的内容，所以它是selected_Book().toLowerCase()，而不是selected_Book.toLowerCase()
• 您必须注意绑定上下文。 rightList 不包含 selectList 成员；它有一个DscName，它应该在第二个foreach 中使用。绑定上下文是我不得不在很多事情上加上 $root 的原因。
• 当您遇到具有多个要求的此类问题时，请将其分解。也许您应该首先解决的问题是如何成功显示两个列表。然后从第一个列表开始构建第二个列表。

function view_model() {
  var self = this;
  self.all_consultants = ko.observableArray();
  self.selected_Auth = ko.observable("all Author");
  self.selected_Book = ko.observable("all books");
  self.selectList = ko.observableArray([{
    name: "J.K R",
    DscName: [
      "HP1", "HP2", "HP3"
    ]
  }, {
    name: "shakespeare",
    DscName: [
      "Hamlet", "Othello"
    ]
  }]);

  //if (self.auth_header()) {
  //  get_list_data();
  //}

  self.rightList = ko.observable();
  self.addToRightList = function(list) {
    self.rightList(list);
  };

}
ko.applyBindings(new view_model());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
    <div id="filter-drop-down" tabindex="1">
        <span data-bind="text:selected_Auth()"></span>
        <ul class="dropdown" data-bind="foreach:selectList">
            <li><a href="#" data-bind="text:name.toLowerCase(),
              click:$parent.addToRightList,
              css:{'selected-filter':$parent.selected_Auth==name}"></a></li>
        </ul>
    </div>
    <div id="filter-drop-down1" tabindex="1" data-bind="with: rightList">
        <span data-bind="text:$root.selected_Book().toLowerCase()"></span>
        <ul class="dropdown" data-bind="foreach:DscName">
            <li><a href="#" data-bind="text:$data.toLowerCase(),
              click:$root.selected_Book.bind($root,$data),
              css:{'selected-filter':$root.selected_Book()==$data}"></a></li>
        </ul>
    </div>
</div>