[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

Knockout에서 SpreadJS 시작하기

SpreadJS는 Knockout을 지원합니다.

Knockout은 JavaScript와 HTML로 풍부하고 데스크톱 같은 사용자 인터페이스를 쉽게 만들 수 있게 해주는 JavaScript MVVM 라이브러리입니다. Knockout은 옵저버를 사용해 UI가 기본 데이터 모델과 자동으로 동기화되도록 하며, 강력하고 확장 가능한 선언적 바인딩 세트를 제공합니다.

Knockout 바인딩은 바인딩 이름과 값 두 가지 요소로 구성되며, 콜론(:)으로 구분됩니다. 예를 들어:

<span data-bind="text: myMessage"></span>

SpreadJS는 Knockout을 사용할 때 커스텀 바인딩이 필요합니다. 커스텀 바인딩에 대한 자세한 내용은 https://knockoutjs.com/documentation 를 참고하세요. SpreadJS의 바인딩 이름은 gc-spread-sheets입니다.

다음 코드 샘플은 커스텀 바인딩을 생성하는 예제입니다. 가능하다면 컴포넌트를 초기화하기 전에 유효한 SpreadJS 라이선스 키를 추가할 수도 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello SPJS Knockout</title>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script type='text/javascript' src='scripts/knockout-3.4.0.js'></script>
    <link href="css/gc.spread.sheets.x.x.x.css" rel="stylesheet" />
    <script src="scripts/gc.spread.sheets.all.x.x.x.min.js"></script>

    <script type="text/javascript">

        // SpreadJS 라이선싱.
        GC.Spread.Sheets.LicenseKey = "xxx";        // 유효한 라이선스를 입력하세요.

        // 먼저 바인딩 값을 정의하세요.
        // ViewModel 정의하기
        function Product(id, name, price, discontinued) {
            this.id = ko.observable(id);
            this.name = ko.observable(name);
            this.price = ko.observable(price);
            this.discontinued = ko.observable(discontinued);
        }
        var ViewModel = function (items) {
            this.items = ko.observableArray(items);
        };

        // ViewModel 생성하기
        var initialData = [
            new Product(104, "Computers", 262, false),
            new Product(95, "Washers", 709, true)
        ];
        var viewModel = new ViewModel(initialData);

        // 바인딩 적용하기
        $(function () {
            ko.applyBindings(viewModel);
        });

    </script>

</head>
<body>
    // Knockout을 사용하기 위해 SpreadJS를 HTML 요소에 바인딩하세요.
    <div id="ss" data-bind="gc-spread-sheets: {
                            sheetCount: 1,
                            tabStripVisible: true,
                            sheets: [
                                {
                                    data: items,
                                    columns: [
                                        { displayName: 'ID', name: 'id', size: 80},
                                        { displayName: 'Name', name: 'name', size: 120},
                                        { displayName: 'Price', name: 'price', size: 80},
                                        { displayName: 'Discontinued', name: 'discontinued', size: 120}
                                    ]
                                }
                            ]

                        }" style="width:50%; height:200px;border: 1px solid gray;">
    </div>
</body>
</html>