带协调的Knockout动态视图

Question

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

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

Answer 1

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

请看下面的代码段。

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您可以进一步使用此代码段并使用淘汰赛template binding，component binding和/或html binding动态地向内容添加内容。