Edit in JSFiddle

var vm = {
    peeps: ko.observableArray([{
        name: "Kamran"},
    {
        name: "John"}]),
    newName: ko.observable()
};

vm.peepsAlt = ko.computed(function() {
    return this.peeps.union([{
        name: "Sam"},
    {
        name: "Steve"}]);
}, vm);

$(function() {
    ko.applyBindings(vm);
    
    $("#btnAdd").click(function () {
        vm.peeps.push({name: vm.newName() });
    });
});

<p><strong>Raw array:</strong></p>
<ul data-bind="foreach: peeps">
    <li data-bind="text: name"></li>
</ul>

<p><strong>Union:</strong></p>
<ul data-bind="foreach: peepsAlt">
    <li data-bind="text: name"></li>
</ul>

<p>
    <label for="addName">Add a name:</label>
    <input id="addName" type="text" data-bind="value: newName" />
    <button id="btnAdd">Add</button>
</p>

body { font-family: Arial, Sans-Serif; font-size: 80%; }
strong { font-weight: bold; }
p { margin: 10px; }
ul {
    margin: 10px;
    padding: 10px;
    
    li {
        padding: 3px;
        background: #eee;
        border-bottom: 1px solid #ccc
    }    
}