JQuery Foreach Vs. Repeat

by David Kyle

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
<script src="http://mbest.github.io/knockout-repeat/knockout-repeat.js"></script>
<h1>Add Job</h1>
<span>Name: </span>
<input type="text" id="job-name-input" />
<br />
<span>Id: </span>
<input type="text" id="job-id-input" />
<br />
<input type="button" name="add-job-button" id="add-job-button" value="Add Job" />
<br />
<input type="button" name="foreach-button" id="foreach-button" value="ForEach" />
<input type="button" name="repeat-button" id="repeat-button" value="Repeat" />
<div id="template-holder"></div>
<script id="repeat-template" type="text/html">
    <div class="template-item" data-bind="repeat: {foreach: Jobs.Items}">
        <span>Id: </span><span data-bind="text: $item().Id"></span>
        <br />
        <span>Name: </span><span data-bind="text: $item().Name"></span>
    </div>
</script>
<script id="foreach-template" type="text/html">
    <div class="template-item" data-bind="foreach: Jobs.Items">
        <span>Id: </span><span data-bind="text: Id"></span>
        <br />
        <span>Name: </span><span data-bind="text: Name"></span>
    </div>
</script>

<div data-bind="repeat: { foreach: Jobs, item '$Items'}"></div>

CSS

#template-holder {
    border: solid 1px #000000;
    border-radius: 8px;
    margin: 10px auto;
    height: 300px;
    width: 80%;
}
.template-item {    
    display: block;
    clear: both;
    float: left;
    border: solid 1px #000000;
    border-radius: 6px;
}

JavaScript

var MainViewModel = function () {
    var self = this;

    self.Jobs = new JobsViewModel();
};

var JobsViewModel = function () {
    var self = this;
    self.Items = ko.observableArray([]);
    self.AddItem = function (itemData) {
        var newJob = new JobItemViewModel();
        newJob.Name(itemData.Name);
        newJob.Id(itemData.Id);
        self.Items.push(newJob);
    };
};

var JobItemViewModel = function () {
    var self = this;
    self.Name = ko.observable("");
    self.Id = ko.observable(0);
};

var viewModel = new MainViewModel();

$(document).ready(function () {
    $("#add-job-button").bind("click", function (e) {
        viewModel.Jobs.AddItem({
            Name: $("#job-name-input").val(),
            Id: $("#job-id-input").val()
        });
        $("#job-name-input").val("");
        $("#job-id-input").val("");
    });
    $("#foreach-button").bind("click", function (e) {
        var output = $("#template-holder");
        output.attr("data-bind", "template: 'foreach-template'");
        ko.applyBindings(viewModel, output[0]);
    });
    $("#repeat-button").bind("click", function (e) {
        var output = $("#template-holder");
        output.attr("data-bind", "template: 'repeat-template'");
        ko.applyBindings(viewModel, output[0]);
    });

});