기본 H1 구성요소 빌드

시드 파일에서 대부분의 내용을 제거하여 H1 구성요소를 생성할 수 있습니다. viewModel을 생성할 때 시드된 머리글 텍스트가 표시됩니다. 나중에 구성요소의 설정과 스타일을 제공할 수 있습니다.

1. appinfo.json 파일을 열고 내용을 다음 행으로 바꿉니다.

   {
      "id": "h1-component-id",
   
      "settingsData": {
                "settingsHeight": 90,
                "settingsWidth": 300,
                "settingsRenderOption": "inline",
                "componentLayouts": [ ],
                "triggers": [ ],
                "actions": [ ]
      },
      "initialData": {
                "componentId": "h1-component-id",
                "customSettingsData": {
                        "headingText": "Heading 1"
                },
                "nestedComponents": [ ]
      }
   }

2. 즐겨찾는 텍스트 편집기에서 assets 폴더의 render.js 파일을 엽니다.
3. render.js 내용을 다음 행으로 변경합니다.

   /* globals define */
   define(['knockout', 'jquery', 'text!./render.html'], function(ko, $, template) {
     'use strict';
     // ----------------------------------------------
     // Define a Knockout ViewModel for your template
     // ----------------------------------------------
     var SampleComponentViewModel = function(args) {
       var SitesSDK = args.SitesSDK;
       // create the observables -- this allows updated settings to automatically update the HTML on the page
       this.headingText = ko.observable();
   
       //
       // Handle property changes from the Settings panel
       //
       this.updateCustomSettingsData = $.proxy(function(customData) {
         this.headingText(customData && customData.headingText);
       }, this);
       this.updateSettings = function(settings) {
         if (settings.property === 'customSettingsData') {
           this.updateCustomSettingsData(settings.value);
         } 
       };
       // Register your updateSettings listener to recieve SETTINGS_UPDATED events
       SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(this.updateSettings, this)); 
   
       //
       // Get the initial settings data for the component and apply it
       //
       SitesSDK.getProperty('customSettingsData', this.updateCustomSettingsData);
     };
   
   
     // ----------------------------------------------
     // Create a knockout based component implemention
     // ----------------------------------------------
     var SampleComponentImpl = function(args) {
       // Initialze the custom component
       this.init(args);
     };
     // initialize all the values within the component from the given argument values
     SampleComponentImpl.prototype.init = function(args) {
       this.createViewModel(args);
       this.createTemplate(args);
       this.setupCallbacks();
     };
     // create the viewModel from the initial values
     SampleComponentImpl.prototype.createViewModel = function(args) {
       // create the viewModel
       this.viewModel = new SampleComponentViewModel(args);
     };
     // create the template based on the initial values
     SampleComponentImpl.prototype.createTemplate = function(args) {
       // create a unique ID for the div to add, this will be passed to the callback
       this.contentId = args.id + '_content_' + args.viewMode;
       // create a hidden custom component template that can be added to the DOM
       this.template = '<div id="' + this.contentId + '">' + 
         template + 
         '</div>';      
     };
     //
     // SDK Callbacks
     // setup the callbacks expected by the SDK API
     //
     SampleComponentImpl.prototype.setupCallbacks = function() {
       //
       // callback - render: add the component into the page
       //
       this.render = $.proxy(function(container) {
         var $container = $(container);
         // add the custom component template to the DOM
         $container.append(this.template);
         // apply the bindings
         ko.applyBindings(this.viewModel, $('#' + this.contentId)[0]);
       }, this);
       //
       // callback - dispose: cleanup after component when it is removed from the page
       //
       this.dispose = $.proxy(function() {
         // nothing required for this sample since knockout disposal will automatically clean up the node
       }, this);
     };
     // ----------------------------------------------
     // Create the factory object for your component
     // ----------------------------------------------
     var sampleComponentFactory = {
       createComponent: function(args, callback) {
         // return a new instance of the component
         return callback(new SampleComponentImpl(args));
       }
     };
     return sampleComponentFactory;
   });

4. assets 폴더에서 구성요소의 간단한 HTML 템플리트로 사용될 새 파일 render.html을 생성합니다.
5. render.html 파일에서 다음 내용을 사용합니다.

   <h1 data-bind="text: headingText()">  
   </h1> 

   구성요소 assets 폴더에 이제 세 개의 파일이 있습니다.

   • render.html
   • render.js
   • settings.html