Как использовать Нокаут-Kinetic с нокаутом наблюдаемых

Недавно я нашел это knockoutjs plugin для KineticJSКак использовать Нокаут-Kinetic с нокаутом наблюдаемых

страница Вики включает в себя пример, но я не очень понимаю, что это делает именно:

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

Помимо из-за того, что не получается шутка «no 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 , но как я могу использовать плагин для привязки Kinetic к нему, чтобы прямоугольники автоматически отображались и обновлялись?

источник

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, вы можете использовать данные в формате JSON непосредственно с помощью knockout mapping plugin:

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

«ничто не JavaScript» относится к устраняя необходимость в установке ваше содержание Kinetic Сценическое с использованием JavaScript вызывает, заменяя его декларативным определением вашего пользовательского интерфейса.

Также имейте в виду, что синтаксис все еще находится в разработке. Я не работал с ним какое-то время, поэтому изменение не произошло быстро, но я был бы готов услышать отзывы от вашего опыта.

источник

2012-09-12 01:19:19

Как использовать Нокаут-Kinetic с нокаутом наблюдаемых

ответ

Смежные вопросы