如何将 Knockout-Kinetic 与敲除 observables 一起使用答案

【问题标题】：How to use Knockout-Kinetic with knockout observables如何将 Knockout-Kinetic 与敲除 observables 一起使用
【发布时间】：2012-09-04 05:43:13
【问题描述】：

我最近为 KineticJS 找到了这个 knockoutjs plugin

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 绑定到它，以便矩形会自动显示和更新吗？

【问题讨论】：

标签： javascript json knockout.js kineticjs

【解决方案1】：

这可以分段构建。给定一个带有矩形数据的 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>

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

一旦您使用 JavaScript 对象，您就可以通过使用 knockout mapping plugin 直接使用您的 JSON 数据：

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

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

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

【讨论】：