基本的な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フォルダに、3つのファイルが含まれるようになります。

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