サイトに埋め込むパーツを「MTAppjQuery 2 ＋コンテンツデータ」で管理してみよう

user.js

(function($){

  // 特定のコンテンツタイプだけにカスタマイズを適用する
  if (mtappVars.type.indexOf('content_data') !== -1 && mtappVars.content_type_id == 5) {

    // コンテンツフィールドのIDを指定します。
    // ブラウザの開発者ツールで入力欄（今回は「オススメ書籍一覧」」フィールドのテキストエリア）を確認し、
    // <input type="text" name="content-field-47" となっている 47 部分が該当します。
    const contentFieldId = '47';

    // オススメ書籍コンテンツタイプのエンドポイントを指定します。1, 4 部分は適宜変更してください。
    const endPoint = '<mt:CGIPath /><mt:DataAPIScript />/v4/sites/1/contentTypes/4/data';

    const tempId = mtapp.temporaryId();
    $('#contentField' + contentFieldId).append('<div id="' + tempId + '"></div>');
    const listingLabels = new Vue ({
      el: '#' + tempId,
      data: {
        items: []
      },
      template: '<ul class="mt-5 w-100"><li v-for="item in items">{{ item.label }}</li></ul>'
    });

    $('[name="content-field-' + contentFieldId + '"]')
    .on('MTAppShowSelectedItems', function () {
      const value = $(this).val();
      if (!value) {
        return;
      }
      mtapp.loadingImage('show');
      const ids = value.replace(/^,+|,+$/g, '').split(',');
      $.ajax({
        url: endPoint,
        dataType: 'json',
        cache: false
      }).done(function (res) {
        listingLabels.items = [];
        const items = res.items;
        for (let i = 0; i < items.length; i++) {
          const id = '' + items[i].id;
          if (ids.indexOf(id) !== -1) {
            listingLabels.items.push(items[i]);
          }
        }
        mtapp.loadingImage('hide');
      });
    })
    .MTAppListing({
      url: endPoint,
      dialogTitle: '書籍を選択',
      cbAfterOK: function (cb, $container, $field) {
        $field.trigger('MTAppShowSelectedItems');
      },
      jsontable: {
        header: {id: 'ID', label: '書籍名'},
        headerOrder: ['id', 'label'],
        itemsRootKey: 'items',
        listingTargetKey: 'id',
        listingCheckboxType: 'checkbox',
        listingTargetEscape: false
      }
    }).prop('readonly', true).trigger('MTAppShowSelectedItems').nextAll('small').hide();
  }

})(jQuery);