更新 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):
您更改设置面板中的标题文本时,组件将更新以显示新文本。