JSFiddle - React, Tailwind, and code Playground

by eimajenthat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.7.2/rivets.bundled.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/0.9.8/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/0.9.8/chosen.min.css">
<div id="contentWrap">
    <select rv-value="truck.job_id">
        <option rv-each-job="jobs" rv-value="job.id">{ job.job_number }</option>
    </select>
    <br/>
    <select id="chosen-version" rv-value="truck.job_id | chosen '#chosen-version'">
        <option rv-each-job="jobs" rv-value="job.id">{ job.job_number }</option>
    </select>
    <p>
        { truck.job_id }
    </p>
</div>

CSS

#contentWrap select {
    width:300px
}

JavaScript

$(document).ready(function(){
    rivets.formatters.chosen = function(value,selector) {
        $(selector).val(value).trigger('liszt:updated');
        console.log($(selector));
            console.log('test');
        return value;
    };
    window.view = rivets.bind($('#contentWrap'),{
        truck:{id:1,job_id:3},
        jobs:[
            {id:1,job_number:'thing1'},
            {id:2,job_number:'thing2'},
            {id:3,job_number:'thing3'},
            {id:4,job_number:'thing4'},
        ]
    });
    
    $('#chosen-version').chosen();
});