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なし」のジョークを受け取らないことを除けば（少なくともそれが何であるかと思いますか？）、このプラグインが、数値または長方形を定義するノックアウトオブザーバブルのリストにバインドするのにどのように役立つかわかりません。

たとえば、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>

常にステージと少なくとも1つのレイヤーを宣言する必要があります。アプリケーションに応じて、ノックアウトバインディングを使用して、シェイプをその1つのレイヤーに整理したり、複数のレイヤーに分散したりできます。

JavaScriptオブジェクトを使用できるようになったら、ノックアウトマッピングプラグインを使用してJSONデータを直接使用できます。

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

「JavaScriptなし」とは、JavaScript呼び出しを使用してKinetic Stageコンテンツをセットアップする必要をなくし、ユーザーインターフェイスの宣言型定義に置き換えることを意味します。

また、構文はまだ開発中であることに注意してください。私はしばらくそれを使っていないので、変化はすぐには起こりませんでしたが、あなたの経験からのフィードバックを聞きたいと思います。

于 2012-09-12T01:19:19.053 に答える