JSFiddle - React, Tailwind, and code Playground

by antishok

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<select data-bind="options: ETList, value:selectedTemplate, optionsText: 'etTitle' "class="dropdown"></select>

<br/>
Selected: <span data-bind="text: selectedTemplate() && selectedTemplate().etTitle"></span>

JavaScript

function EmailTemplate(data) {
    var self = this;
    self.etId = ko.observable(data.email_template_id);
    self.etTypeId = ko.observable(data.email_template_type_id);
    self.etTitle = ko.observable(data.email_template_title);
    self.etContent = ko.observable(data.email_template_content);
    self.etAppYear = ko.observable(data.app_year);
    self.etSubject = ko.observable(data.subject);
    self.etActive = ko.observable(data.active);
}

function EmailTemplateViewModel() {
    var self = this;
    self.ETList = ko.observableArray();
    self.selectedTemplate = ko.observable();
    
    var sampleData = [{
        email_template_id: 'id1',
        email_template_title: 'title1'
    }, {
        email_template_id: 'id2',
        email_template_title: 'title2'
    }];

    setTimeout(function(){
        $.each(sampleData, function (index, item) {
            self.ETList.push(new EmailTemplate(item));
        });
    }, 500);

}
$(document).ready(function () {
    ko.applyBindings(new EmailTemplateViewModel());
});