1

我最近为 KineticJS找到了这个knockoutjs 插件

wiki 页面包含一个示例，但我并不真正了解它究竟做了什么：

<!DOCTYPE html>
<html>
  <head>
    <title>A Knockout/Kinetic example</title>
    <script type="text/javascript" src="kinetic-v3.9.8.min.js"></script>
    <script type="text/javascript" src="knockout-2.1.0.js"></script>
    <script type="text/javascript" src="../knockout-kinetic.js"></script>
  </head>
  <body>
    <!--
   This example is from the 'Rect' tutorial:
   http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rect-tutorial/
   -->
    <div id="container">
      <!-- Look, ma! No JavaScript! -->
      <!-- ko Kinetic.Stage: { width: 578, height: 200 } -->
      <!--     ko Kinetic.Layer: { } -->
      <!--         ko Kinetic.Rect: { x: 239, y: 75, width: 100, height: 50, fill: "#00D2FF", stroke: "black", strokeWidth: 4 } -->
      <!--         /ko -->
      <!--     /ko -->
      <!-- /ko -->
    </div>
    <script type="text/javascript">
        // Ok, a *little* JavaScript...
        ko.applyBindings();
    </script>
</html>

除了没有得到“没有 javascript”的笑话（至少我认为它是这样的吗？）我看不出这个插件如何帮助我绑定到定义数字或矩形的敲除 observables 列表。

例如，假设我通过 ajax 调用得到以下 json：

{"rectangles":[{"id":1,"x":0,"y":0,"width":200,"height":30},{"id":2,"x":0,"y":40,"width":200,"height":30}]}

然后我可以使用这些数据在我的 ViewModel 中填充一个可观察的数组，但是如何使用插件将 Kinetic 绑定到它，以便自动显示和更新矩形？

4

1 回答 1

2

这可以分段构建。给定一个带有矩形数据的 JavaScript 对象，您可以创建视图模型：

var viewModel = ko.observable(data);
ko.applyBindings(viewModel);

并使用实现您的视图的 HTML 文件呈现它：

<div id="container"> <!-- The container is optional but good practice -->
  <!-- ko Kinetic.Stage: { width: 800, height: 600 } -->
  <!--     ko Kinetic.Layer: { } -->
  <!--         ko foreach: rectangles -->
  <!--             ko Kinetic.Rect: $data -->
  <!--             /ko --> 
  <!--         /ko -->
  <!--     /ko -->
  <!-- /ko -->
</div>

你总是需要声明你的 Stage，并且至少要声明一个 Layer。您可以使用敲除绑定在该层中组织您的形状，或将它们分布在多个层中，以适合您的应用程序。

一旦您使用 JavaScript 对象，您可以通过使用敲除映射插件直接使用您的 JSON 数据：

var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);

“无 JavaScript”是指无需使用 JavaScript 调用设置 Kinetic Stage 内容，而是使用用户界面的声明性定义来替换它。

另外，请注意语法仍在开发中。我已经有一段时间没有使用它了，所以变化并没有很快发生，但我很想听听你的经验反馈。

于 2012-09-12T01:19:19.053 回答