使用 Knockoutjs 显示视图模型中数据的更好方法

Better way to displaying data from view model using knockoutjs?

本文关键字：数据 更好 方法 模型 Knockoutjs 显示 视图 使用      更新时间：2023-09-26

我有一个具有单独层次结构的视图模型，在单击事件期间，我想为"单击"数据项显示辅助层次结构中数据的模式对话框。为了使它更容易理解，我在 jsfiddle 中模拟了一个示例，该示例实现了所需的结果（为简单起见，没有模式），但它是通过重复相同的标记而不是修改来自单个标记组的数据来完成的。

var FoundingFathersViewModel = function(data) {
    var self = this;
    self.foundingFathers = ko.observableArray([]);
    //click
    self.detail = function(father) {
        //get the selected Founding Father's positions HTML and 
        //set the HTML of the detail div
        var html = $('#'+father.id()).html();
        $('#detail').html(html);
    };
    var mapping = $.map(data, function(item) { return new FoundingFather(item); });
    self.foundingFathers(mapping);
};
var FoundingFather = function(item) {
    this.id = ko.observable(item.id);
    this.name = ko.observable(item.name);
    this.positions = ko.observableArray(item.positions);
};
ko.applyBindings(new FoundingFathersViewModel(data));

jsfiddle 代码只是修改 CSS 显示属性以显示正确的详细信息。我想会有一种"更干净"的方法可以做到这一点。任何帮助将不胜感激。如果没有更优雅的解决方案，我也想知道。https://jsfiddle.net/jvz6gktm/2/

我建议转向selectedItem的方法。单击总裁会将该总统设置为所选项目，这是填充详细信息部分的内容。

查看我更新的小提琴：https://jsfiddle.net/jvz6gktm/5/

详细区域： 

<div id="detail" data-bind="with: selectedPresident">
  <div class="positions">
    <div data-bind="foreach: positions" class="detail">
      <h5 data-bind="html: position" />
      <h6 data-bind="html: yearsActive" />
    </div>
  </div>
</div>

选择：

self.selectedPresident = ko.observable();
self.selectPresident = function(father) {
  self.selectedPresident(father);
};

作为旁注：如果你使用KNOCKOUT，不要使用jQuery来弄乱DOM，你只是在自找麻烦。

相关文章：