JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<select data-bind="
    options     : personSelect.options,
    optionsText : personSelect.optionsText,
    value       : personSelect.optionsValue
"></select>
<hr>
<h1 id="pageTitle" data-bind="text: item().greeting"></h1>
<!-- ko foreach: item().profile -->
<p data-bind="text: $data"></p>
<!-- /ko -->
<footer class="author" data-bind="text: author()"></footer>

JavaScript

var person = [
    {
        name: 'さかい',
        greeting: 'ポイントカード持たない派です！',
        profile: [
            '私の名前は酒井優です。',
            'チャラい優とか、出会い優とかとも呼ばれています。',
            'みんなが私にいろいろ教える“酒井宿”で日々圧倒的成長中です！'
        ]
    },
    {
        name: 'おち',
        greeting: 'シャトーブリアン食いたい',
        profile: [
            'すごく失礼に聞こえたらすみません。',
            'カルーセルはやめろ。'
        ]
    },
    {
        name: 'てんじろう',
        greeting: 'てんじろうだよぉ',
        profile: [
            '週7で飲んでるよぉ',
            'チャームポイントは目だよぉ'
        ]
    }
];

function CreateProfileData(idx) {
    var data = person[idx];
    return data;
}

function ProfileViewModel() {
    var self = this;

    // 初期設定として0
    self.item = ko.observable(CreateProfileData(0));
    
    self.author = function() {
        return 'by ' + self.item().name;
    };

    // 指定範囲のselect
    self.personSelect = {
        options      : ko.observableArray([0,1,2]),
        optionsValue : ko.observable(),
        optionsText  : function(val) {
            return person[val].name;
        }
    };

    self.personSelect.optionsValue.subscribe(function(newVal) {
        // 変更されたselectによって self.item() を変える
        switch (newVal) {
            case 0: self.item(person[0]); break;
            case 1: self.item(person[1]); break;
            case 2: self.item(person[2]); break;
            default: self.item(person[0]); break;
        }
    });
    
    console.log(self.item().name)
}

var vm = new ProfileViewModel();
ko.applyBindings(vm);