Knockout Person - Hello 3

HTML

<div id="person">
    <span data-bind="text: Title"></span>
    <div>
        <label for="first-name">First Name</label>
        <input id="first-name" data-bind="value: FirstName"/>
    </div>

    <div>
        <label for="last-name">Last Name</label>
        <input id="last-name" data-bind="value: LastName"/>
    </div>

    <div data-bind="visible: HasName">
        Hello <span data-bind="text: FullName"></span>
    </div>
</div>

JavaScript

var Person = function(){
    var self = this;
    self.Title = 'Foo';
    self.FirstName = ko.observable('');
    self.LastName = ko.observable('');
    
    self.FullName = ko.computed(function(){
       return self.FirstName() + ' '  + self.LastName();                     
    });
    
    self.HasName = ko.computed(function(){
       return self.FirstName() || self.LastName();            
    });
};

ko.applyBindings(new Person(), document.getElementById('person'))