JSFiddle - React, Tailwind, and code Playground

by fastfasterfastest

HTML

<script src="https://unpkg.com/[email protected]/build/output/knockout-latest.debug.js"></script>
<div>Length1: <span data-bind="text:course().length"></span></div>
<div>Length2: <span data-bind="text:course()[0].subjectList().length"></span></div>
<div>Length3: <span data-bind="text:course()[0].subjectList().length"></span></div>
<button data-bind="click: click">
Push
</button>

JavaScript

var subject = function(data) {
  var self = this;
  self.subjectName = ko.observable(data ? data.subjectName : "");
  self.subjectPassPercentage = ko.observable(data ? data.subjectPassPercentage : "");
}

var course = function(data) {
  var self = this;
  self.courseName = ko.observable(data ? data.courseName : "");
  self.subjectList = ko.observableArray([]);
}

viewmodel = (function(ko) {
  "use strict";
  var me = {
    subjectObject: ko.observableArray([]), // Array of subject
    course: ko.observableArray([]) // Array of course
  };
  me.click = function() {
    //alert(14)
    //me.course()[0].subjectList().push(me.subjectObject()[0]);
    me.course()[0].subjectList.push(me.subjectObject()[0]);
  };

  me.subjectObject.push(new subject({
    subjectName: "subname",
    subjectPassPercentage: 75
  }));
  me.course.push(new course());
  //me.course()[0].subjectList().push(me.subjectObject());    
  me.click();
  me.click();
  return me;
})(ko);

ko.applyBindings(viewmodel);