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>

当我点击那个＆＃34;关闭＆＃34;我想彻底从DOM中删除整个窗口。

我的想法是在相应的视图模型中使用：

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

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

这是完整的视图模型../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插件，它将绑定应用于动态生成的DOM元素：

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

问题：当有人点击＆＃34;关闭＆＃34;？

时，从DOM中删除该窗口的正确方法是什么？

P.S。：我知道我可以写一个内联的onclick处理程序，比如

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

但这是a）不是KO方式而b）非常不优雅。

Answer 1

您可以在纯knockout中以更简单的方式执行此操作。

有一个可观察的数组，其中包含您的窗口元素。
有一个窗口View Model并为每个新窗口创建一个新实例并将其推送到数组（无需动态绑定）。
通过将相应窗口传递给父模型来删除它。
您还可以在WindowVM中使用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);

查看：

 <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> 

Answer 2

请原谅我没有重复使用你的大部分代码，但我想指出，这种“KO方式”可能与“jQuery方式”有所不同。

通常，如果要动态添加和删除DOM元素，可以使用if，visible或with绑定。当if和with绑定被赋予“假”值时，它们会删除它们的子元素。当falsy时，visible绑定隐藏其内容。

对于类似popup / modal的方法，你可以这样做：

App有一个window可观察。
应用程序的一些组件可以访问此可观察对象;他们可以在那里放置一个视图模型
在用户界面中，有一个容器可以检查window中是否存在“某些内容”，如果存在：它会呈现模式
要关闭模式，我们会清除其值：this.window(null)

var Button = function(label, info, window) {
  this.label = label;
  this.info = info;
  
  // On click, we pass this viewmodel to window
  this.onClick = window;
};
    
var App = function() { 
  this.window = ko.observable(null);

  this.closeWindow = function() {
    this.window(null);
  }.bind(this);

  // Give our button access to our window
  this.myButton = new Button("Button 1", 
                             "Info about this button", 
                             this.window);
};

ko.applyBindings(new App());

.window {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  color: white;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div>
  <h2>App</h2>
  <div data-bind="with: myButton">
    <button data-bind="text: label, click: onClick"></button>
  </div>
</div>

<!-- ko with: window -->
<div class="window">
  <button data-bind="click: $parent.closeWindow">close</button>
  <p data-bind="text: info"></p>
</div>
<!-- /ko -->

评论表示担心这不适用于多个窗口：让window成为observableArray。 openWindow函数修改它获取的数据，添加close方法和pos（为了示例），并将其推送到数组。

var Button = function(label, info, openWindowCB) {
  this.label = label;
  this.info = info;
  
  // On click, we pass this viewmodel to window
  this.onClick = openWindowCB;
};
    
var App = function() { 
  this.windows = ko.observableArray([]);

  this.hasWindows = ko.pureComputed(function() {
    return !!this.windows().length;
  }, this);
    
  
  this.closeWindow = function(window) {
    this.windows.remove(window);
  }.bind(this);
  
  this.openWindow = function(vm) {
    // Here, you *could* compose a window by adding a close, drag, etc. method:
    // Can be by wrapping in another VM, or by adding functions:
    var windowVM = {};
    var index = this.myButtons.indexOf(vm);
    var extension = {
      close: this.closeWindow.bind(this, windowVM),
      pos: { left: index * 50 + "px", top: index * 20 + "px" }
    };
    
    Object.assign(windowVM, vm, extension);
    
    this.windows.push(windowVM);
  }.bind(this);

  // Give our button access to our window
  this.myButtons = [1,2,3,4,5].map(function(id) {
    return new Button("Button  " + id, 
                      "Info about button " + id,
                      this.openWindow);
    
  }.bind(this));
};

ko.applyBindings(new App());

.windows {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.window {
  position: absolute;
  background: #efefef;
  border: 1px solid black;
  pointer-events: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div>
  <h2>App</h2>
  <div data-bind="foreach: myButtons">
    <button data-bind="text: label, click: onClick"></button>
  </div>
</div>

<!-- ko if: hasWindows -->
<div class="windows" data-bind="foreach: windows">
  <div class="window" data-bind="style: pos" >
    <button data-bind="click: close">close</button>
    <p data-bind="text: info"></p>
  </div>
</div>
<!-- /ko -->

具有KO点击绑定以从DOM

问题：当有人点击＆＃34;关闭＆＃34;？

2 个答案: