带坐标的淘汰赛动态视图答案

【问题标题】：Knockout dynamic view with coordinations带坐标的淘汰赛动态视图
【发布时间】：2015-11-12 11:26:40
【问题描述】：

我有一个矩形列表，每个矩形都有坐标（x，y）和大小（宽度，长度）。我需要从这个列表中构建一个动态视图，以显示这个矩形的大小和位置（当然这个列表可以更改，所以它不是硬编码的）。每个矩形都必须是一个 HTML 元素（如 DIV），因为我需要在其中插入文本/图像。例如 -

两年前我用画布做过，但我想知道 - 有没有办法用 KnockoutJS 创建这个视图？

【问题讨论】：

这当然是可能的，检查这个fiddle。
谢谢！！您可以将其发布为答案吗？

标签： knockout.js

【解决方案1】：

当然，只要您有可用的宽度、高度、x 和 y 坐标，这是可能的。

看看下面的sn-p。

var vm = {
  boxes: ko.observableArray([]),
  form: {
    width: ko.observable(250),
    height: ko.observable(250),
    x: ko.observable(250),
    y: ko.observable(250),
  },
  _addBox: function(width, height, x, y) {
    this.boxes.push({
      width: ko.observable(width),
      height: ko.observable(height),
      x: ko.observable(x),
      y: ko.observable(y),
    });
  }
}

vm.addBox = function() {
  this._addBox(this.form.width(), this.form.height(), this.form.x(), this.form.y())
}.bind(vm);


vm._addBox(100, 100, 0, 0);
vm._addBox(200, 100, 103, 50);
vm._addBox(200, 100, 306, 0);
vm._addBox(250, 100, 200, 153);

ko.applyBindings(vm);

.container {
  border: thin solid black;
  width: 550px;
  height: 550px;
  position: relative;
  float: left;
}
.form {
  float: left;
  width: 200px;
}
.form label {
  display: block;
}
.box {
  position: absolute;
  border: 3px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="container" data-bind="foreach: boxes">
  <div class="box" data-bind="style: { width: width() + 'px', height: height() + 'px', left: x() + 'px', bottom: y() + 'px' }"></div>
</div>
<div class="form" data-bind="with: form">
  <label>Width
    <input type="text" data-bind="value: width" />
  </label>
  <label>Height
    <input type="text" data-bind="value: height" />
  </label>
  <label>X-coord
    <input type="text" data-bind="value: x" />
  </label>
  <label>Y-coord
    <input type="text" data-bind="value: y" />
  </label>
  <button data-bind="click: $root.addBox">Add Box</button>
</div>

您可以进一步使用这个 sn-p 并使用淘汰赛 template binding、component binding 和/或 html binding 将内容动态添加到框中。

【讨论】：