如何使用淘汰賽動力學與基因敲除可觀測量

我最近發現這個knockoutjs plugin的KineticJS如何使用淘汰賽動力學與基因敲除可觀測量

維基頁面包括一個例子，但我真的不明白它做什麼確切：

<!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」的笑話（至少我認爲這就是它是什麼？）我看不出這個插件如何幫助我綁定到定義數字或矩形的敲除觀察列表。

例如，假設我得到以下JSON作爲Ajax調用的結果：

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

然後我可以用這個數據在我的ViewModel 填充可觀察到的數組，但我怎麼使用插件綁定到它的動力學，使矩形自動顯示和更新？

來源

2012-09-11 TimothyP

這可以構建成塊。考慮到與您的矩形數據的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您動力學舞臺內容調用，用您的用戶界面的聲明性定義替換它。

另外，請注意語法仍在開發中。我有一段時間沒有使用它，所以改變並沒有很快發生，但我渴望聽到你的經驗反饋。

來源

2012-09-12 01:19:19

如何使用淘汰賽動力學與基因敲除可觀測量

回答

相關問題