settings.html
파일을 업데이트하여 H1 구성요소의 텍스트 설정에 사용할 수 있는 설정 패널을 제공합니다.
settings.html
파일을 업데이트합니다.
<!DOCTYPE html> <html lang="en"> <head> <!-- only allow embedding of this iFrame in SCS --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>H1 Component</title> <!-- include sample apps styling --> <link href="/_sitescloud/renderer/app/sdk/css/app-styles.css" rel="stylesheet"> <!-- include supporting files --> <script type="text/javascript" src="/_sitescloud/renderer/app/apps/js/knockout.min.js"></script> <script type="text/javascript" src="/_sitescloud/renderer/app/apps/js/jquery.min.js"></script> <!-- include the Sites SDK --> <script type="text/javascript" src="/_sitescloud/renderer/app/sdk/js/sites.min.js"></script> </head> <body data-bind="visible: true" style="display:none; margin:0px; padding:0px;background:transparent;background-image:none;"> <div class="scs-component-settings"> <div> <!-- Heading Text --> <label id="headingTextLabel" for="headingText" class="settings-heading" data-bind="text: 'Heading Text'"></label> <input id="headingText" data-bind="value: headingText" placeholder="Heading" class="settings-text-box"> </div> </div> <script type="text/javascript"> // define the viewModel object var SettingsViewModel = function() { var self = this; // create the observables for passing data self.headingText = ko.observable(); // create rest of viewModel self.saveData = false; // Get custom settings SitesSDK.getProperty('customSettingsData', function(data) { // update observable self.headingText(data.headingText); // now that viewModel is initialized and can start saving data self.saveData = true; }); // save whenever any updates occur, but don't save if data hasn't been loaded into the form yet self.save = ko.computed(function() { var saveconfig = { 'headingText': self.headingText() }; // save data in page if (self.saveData) { SitesSDK.setProperty('customSettingsData', saveconfig); } }, self); }; // apply the bindings ko.applyBindings(new SettingsViewModel()); </script> </body>
머리글 텍스트를 변경할 수 있는지 확인합니다(체크포인트 4).
설정 패널에서 머리글 텍스트를 변경하면 구성요소가 업데이트되어 새 텍스트를 표시합니다.