jquery - 访问具有 KO 单击绑定(bind)的元素以从 DOM 中删除父元素

Question

我创建了一些代码，当用户单击某个元素时，会创建一个小的弹出窗口。其中存在多个元素，每个元素在单击时都会创建自己的窗口。

这是正在创建的 HTML:

<div class="window">
  <header>
    <h2 class="title" data-bind="text: title">window title</h2>
    <i data-bind="click: destroyWindow(this)">close</i>
  </header>
  <main>
    <div class="content">content area</div>
  </main>
</div>

当我点击那个“关闭”元素时，我想从 DOM 中完全删除整个窗口。

我的想法是在相应的 View 模型中像这样:

self.destroyWindow = function(elem) {
    $(elem).closest('.window').remove();
};

但似乎我无法轻松地将单击的元素作为参数传递。 console.log(elem) 显示 this 指向全局对象 window。

这是完整的 View 模型../component/draggable.window.js:

var WindowViewModel = function (params) {
    var self = this;
    /* BEGIN Properties */
    self.title = ko.observable("Window title");
    self.destroyWindow = function(elem) {
        $(elem).closest('.window').remove();
    };
    /* END Properties */
};

这是将这些窗口添加到 DOM 的调用:

var dragWin = require('../component/draggable.window.html'); // the above html
var vm = require('../component/draggable.window');
$(dragWin)
    .appendTo($("body"))
    .applyBindings(new vm())
;

我还编写了一个非常小的 jQuery 插件，它将绑定(bind)应用于动态生成的 DOM 元素:

(function($) {
    $.fn.applyBindings = function(vm) {
        return this.each(function() {
            ko.applyBindings(vm ? vm : null, this);
        });
    };
}(jquery));

问题:当有人单击“关闭”时，从 DOM 中删除该窗口的正确方法是什么？

P.S.:我知道我可以编写一个内联 onclick 处理程序，例如

<i onclick="$(this).closest('.window').remove()">close</i>

但这 a) 不是 KO 方式，b) 非常不优雅。

Answer 1

您可以通过纯knockout以更简单的方式完成此操作。

• 有一个可观察的数组，用于保存窗口的元素。
• 拥有一个窗口 View 模型，并为每个新窗口创建一个新实例，并将其推送到数组(不需要动态绑定(bind))。
• 通过将相应的窗口传递给父模型来删除它。
• 您还可以在 WindowVM 中绑定(bind)一个用于 css 的变量，以便为每个窗口提供不同的样式。

示例:https://jsfiddle.net/kyr6w2x3/150/

JS:

var MainViewModel = function(){
  var self = this;
  self.windowList = ko.observableArray([]);
  self.destroyWindow = function(item){
    ko.utils.arrayForEach(self.windowList(), function (element) {
      if(element && element == item)self.windowList.remove(element);
    });
   }
  var i = 0;
  self.createWindow = function(){
    i++;
    self.windowList.push(new WindowViewModel ({title: "Window " + i , content : " content area " + i }));
  }
}        

var WindowViewModel = function(data){
  var self = this;
  self.title = ko.observable(data.title || '');
  self.content = ko.observable(data.content || '');
}

var viewModel = new MainViewModel();
ko.applyBindings(viewModel);

查看:

<!-- ko foreach: windowList -->
<div  class="modal">
  <div class="window">
    <h2 class="title" data-bind="text: title">window title</h2>
   <button class="close" data-bind="click: $parent.destroyWindow">X </button>
   <p class="content" data-bind="text: content"></p>
  </div>
</div>
<!-- /ko -->