KnockoutJs + AMD requirejs

by sas_sam

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
<div data-bind="foreach: Tasks.TaskList">
    <p>
        <span class="name" data-bind="text: Name"></span>:
        <span class="desc" data-bind="text: Description"></span>
    </p>
</div>
<div>
    <button data-bind="click: Events.AddItem">Add New Task</button>
    <p>
        Name <input data-bind="value: Tasks.NameInput" />
        Description <input data-bind="value: Tasks.DescInput" />
    </p>
</div>

CSS

.name {
    font-weight: 900;
    color: #333;
}

.desc {
    color: #009;
}

JavaScript

define("knockout", function () {
    return ko;
});

define("TaskList", ["knockout"],function (ko) {
    function TaskList(){
        var self = this;
        self.NameInput = ko.observable("");
        self.DescInput = ko.observable("");
        self.TaskList = ko.observableArray();
    }
    return new TaskList();
});

define("Events", ["knockout","TaskList"],function (ko, obj) {
    var events  = function() {
        var self = this;
        self.AddItem = function (data) {
            var inputData;
            if (typeof(data.Name) === 'undefined') {
                inputData = { Name: obj.NameInput(), Description:  obj.DescInput() };
            } else
                inputData = data;
            obj.TaskList.push(inputData);
        }
        self.RemoveItem = function (data) {
            obj.TaskList.remove(data);
        }
    }
    return new events();
});

define("Helpers", ["knockout","TaskList"],function (ko, obj) {
    var helpers  = function() {
        var self = this;
        self.SortTaskList = function (data) {
            obj.TaskList.sort();
        }
    }
    return new helpers();
});

define("Main", ["knockout","TaskList", "Events", "Helpers"], function (ko, obj, e, h) {
    var main  = function() {
        var self = this;
        self.Tasks = obj;
        self.Events = e;
        self.Helpers = h;
    }
    return new main();
});

require(["Main", "knockout"], function (main, ko) {
    main.Events.AddItem({ Name: "My first task", Description: "Start the job"});
    main.Events.AddItem({ Name: "My second task", Description: "Continue the job"});
    main.Events.AddItem({ Name: "My last task", Description: "Finish the job"});
    ko.applyBindings(main);
    console.log(main.Tasks.TaskList().length);
});