UnderscoreKO

A tiny library that adds the collection and array methods from Underscore.js to Knockout observable arrays.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="https://github.com/kamranayub/UnderscoreKO/releases/download/v1.6.0.0/underscore-ko-1.6.0.min.js"></script>
<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>

SCSS

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
    }    
}

JavaScript

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() });
    });
});