JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  	<span data-bind="text: outerProperty()"></span>
    <button data-bind="click: outermethod">This Works</button>
</div>

<div>
    <!-- ko with: child -->
  	<span data-bind="text: $parent.outerProperty()"></span>
    <button data-bind="click: $parent.outermethod">This Doesn't</button>
    <!-- /ko -->
</div>

<div>
    <!-- ko foreach: children -->
    <span data-bind="text: $parent.outerProperty()"></span> 
  	<button data-bind="click: $parent.outermethod">These Don't Either</button>
    <!-- /ko -->
</div>

CSS

div {
  border-bottom: solid;
  padding: 20px
}

JavaScript

ViewModel = function () {}

ViewModel.prototype = {
    child: function () {},
    children: new Array(3),

    outermethod: function () {
        this.innerMethod();
    },

    innerMethod: function () {
        alert("ok!");
    },

  	outerProperty: function () {
  		return this.innerProperty();
	},

   	innerProperty: function() {
  		return "Property is OK";
    }
}

ko.applyBindings(new ViewModel());