Question

我有一个具有单独层次结构的视图模型，在点击事件期间，我想显示来自二级层次结构的数据的模式对话框，用于点击＆＃34;点击＆＃34;数据项。为了使这更容易理解，我在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显示属性以显示正确的细节。我想要有一个更清洁的＆＃34;这样做的方式。任何帮助，将不胜感激。如果没有更优雅的解决方案，我也想知道这一点。 https://jsfiddle.net/jvz6gktm/2/

Answer 1

我建议采用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);
};

作为旁注：如果你正在使用淘汰赛，不要使用jQuery搞乱DOM，你只是在寻找麻烦。

使用knockoutjs从视图模型显示数据的更好方法是什么？

1 个答案: