javascript - knockout JS : Display binded subList foreach meta items using exapnd option

Question

这是我的数据结构。

=MetaData=
School
College
Home

=SubDetails=
School
    ClassRooms
    Library 
    OfficeRoom
College
    AdminOffice
    Departments
    Lab
    PlacementHall
Home
    LivingRoom
    StudyRoom
    Hall
    DiningHall
    Portico

将使用下拉菜单选择元数据值。例如，如果学校是从下拉菜单中选择的值，则显示区域应显示为:

+ school x

在我的案例中，当我点击 + 展开图标后，它应该会像数据一样列出详细信息。

- School x
    ClassRooms
    Library 
    OfficeRoom

例如，如果我连续选择多个元素，比如学校、学院、家庭等

- School x
    ClassRooms
    Library 
    OfficeRoom
+ College x
- Home x
    LivingRoom
    StudyRoom
    Hall
    DiningHall
    Portico

我试过的代码:

HTML:

<div class="DataDisplay">
    <!-- ko foreach: selectedMetaDataList -->
    <span class="metaHeader">
            <span>
                <a href="#" data-bind="click: $parent.expandMetaData"><i class="fa fa-plus" style="padding-right: 3px;"></i></a>
                <span data-bind="text: $data"></span>
                <span class="combineImgText">
                    <img data-bind="click: $parent.remove" class="delfilter" src="@Url.Content("~/Content/images/icon_x_purple_on.png")" width="15" height="15" />
                </span>
            </span>
        </span><br />
    <!-- /ko -->
    <span class="subDetails" style="display: none">
        <!-- ko foreach: selectedSubDetailsList -->
        <span data-bind="text: $data" style="margin-left:25px"></span><span class="combineImgText">
            <img data-bind="click: $parent.remove" class="delfilter" src="@Url.Content("~/Content/images/icon_x_purple_on.png")" width="15" height="15" />
        </span><br />
        <!-- /ko -->
    </span>                             
</div>

JS:

if(//matching condition)
{
    selectedMetaDataList.push(selectedMetaData().toString()); //ko.observableArray([])
    selectedSubDetailsList.push(value[i]); //ko.observableArray([])
}

expandMetaData: function () {          
    expandData($(".subDetails").is(':visible') ? true : false);
    $(".subDetails").toggle();
},

问题是如果我选择了多个，那么最后添加的元素如果是可扩展的，它包含了之前选择的元素的所有子细节。我的问题是如何绑定(bind)特定的选定元数​​据以显示其子详细信息内容。在过去的两天里，我一直在为此苦苦挣扎:(

任何建议都会有所帮助!

Answer 1

在没有看到您的 View 模型的情况下，我可以给您的最佳建议是:

• 您的 View 模型不必复制您的数据结构。它们是您的数据和 View 之间的一层，因此您可以做出有利于您想要呈现事物的方式的更改。
• 不要使用 jQuery 来隐藏/显示东西，使用 knockout 的默认数据绑定(bind):visible 或 css

为了说明这些要点:

• 包含对主要类别内部详细信息的引用的 View 模型
• 用于隐藏和显示的可见绑定(bind)
• View 模型中的展开状态，可自动更新 UI 的多个部分

var metaData = [
  "School",
  "College",
  "Home"
];

var subDetails = {
  School: [
    "ClassRooms",
    "Library",
    "OfficeRoom"
  ],
  College: [
    "AdminOffice",
    "Departments",
    "Lab",
    "PlacementHall"
  ],
  Home: [
    "LivingRoom",
    "StudyRoom",
    "Hall",
    "DiningHall",
    "Portico"
  ]
};

// An important purpose of this view model is to include details _inside_ a meta item
var MetaViewModel = function(label) {
  // Expanded is used to bind to the visiblity of the details
  this.expanded = ko.observable(false);
  
  // Add a '+' or '-' sign based on expanded state
  this.label = ko.pureComputed(function() {
    return (this.expanded() ? "- " : "+ ") + label;
  }, this);
  
  // Here, we add the details to the item
  this.details = ko.observableArray(subDetails[label]);
  
  // Toggle flips the state of expanded
  this.toggle = function() {
    this.expanded(!this.expanded());
  }.bind(this);
  
  // Removes a detail from the item's details list
  this.remove = function(str) {
    this.details.remove(str);
  }.bind(this);
};

MetaViewModel.create = function(label) { return new MetaViewModel(label); };

var viewModel = {
   meta: metaData.map(MetaViewModel.create) // Creates a new viewmodel for each meta data category
}

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: meta">
  <li>
    <div data-bind="text: label, click: toggle"></div>
    <ul data-bind="foreach: details, visible: expanded">
      <li data-bind="text: $data + ' X', click: $parent.remove"></li>
    </ul>
</ul>