JSFiddle - React, Tailwind, and code Playground

HTML

Nested <b>using</b> parentheses:
<span data-bind="text: selectedMessage() && selectedMessage().message().subject()"></span>
<p>
    <input type="text" data-bind="value: selectedMessage() && selectedMessage().message().subject()"/>
</p>

Nested <b>no</b> parentheses: 
<span data-bind="text: selectedMessage() && selectedMessage().message().subject"></span>
<p>
    <input type="text" data-bind="value: selectedMessage() && selectedMessage().message().subject"/>
</p>

JavaScript

function viewModel() {
    var self = this;
    self.selectedMessage = ko.observable('');
}

function AnotherViewMode()
{
	var self = this.
	self.someProperty = ko.observable(232);
}

var vm = new viewModel();
ko.applyBindings(vm);
vm.selectedMessage(new messageViewModel());

function messageViewModel() {
    var self = this;
    self.message = ko.observable(new messageItemViewModel());
}

function messageItemViewModel() {
    var self = this;    
    self.subject = ko.observable('Some sweet offer');
}