JSFiddle - React, Tailwind, and code Playground

by Asle Gundersby

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

JavaScript

var Textbatch = function (data) {
    var self = this;
    self.id = ko.observable(data.id);
    return self;
};

Project = function (data) {
    var self = this;
    self.id = ko.observable(data.id);
    return self;
};

ViewModel = function (model) {
    var self = this;

    self.selectedProject = ko.observable();
    self.selectedText = ko.observable();
    self.Textbatches = ko.observableArray();


    self.Projects = ko.observableArray(
    ko.utils.arrayMap(model, function (item) {
        return new Project(item);
    }));


    self.selectedProject.subscribe(function (project) {

        /* ...some code... */

        new Request.JSONP({
            url: 'http://jsfiddle.net/echo/jsonp/',
            data: {
                id: 'someId' 
            },
            onSuccess: function (response) {
                   
                var mappedTextbatches = $.map(response, function (item) {
                  return new Textbatch(item);
                });
                 
                console.log("Update text batches");
                self.Textbatches(mappedTextbatches);
            
            }
        }).send(); 
    /* ...some more code... */
});

console.log("Init selectedProject");
self.selectedProject(self.Projects()[0]);
console.log("Init selectedText");
//This value is set before Textbatches has any data and nothing updates it
self.selectedText(self.Textbatches()[0]);

self.parentIDFilteredTextbatches = ko.computed(function () {
    
    console.log("Evaluating computed");
    var textbatch = self.selectedText();
     
    return ko.utils.arrayFilter(self.Textbatches(), function (item) {
        return item.parentID === textbatch.parentID; /* ERROR ON THIS LINE */
    });
});
};

ko.applyBindings(new ViewModel([{
    id: 'p1'
}]));