KO - Basic Example

by bizamajig

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <ul data-bind="foreach: Comments">
        <li data-bind="attr: { id: Id }" class="Comment">
           <div data-bind="text: DateCreated" class="prettyDate"></div>

        </li>
    </ul>         

<button data-bind="click: addItem">Add</button>


<div class="prettyDate">12-13-2012</div>

CSS

.prettyDate{ color : blue };

.prettyDateBg{ color : black};

JavaScript

(function($) {
    $.fn.prettify = function() {
        return $(this).each(function() {

            var self = $(this);
            var db = self.attr('data-bind')

            if (db == null) db = '';
            if (db.indexOf('needsPrettification') == -1) {
                if (db !== "") db += ', ';

                self.attr('data-bind', db + "needsPrettification: true");
                return;
            }
            self.css("background-color", "pink");
        });
    };

})(jQuery);

ko.bindingHandlers.needsPrettification = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {

        var value = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);

        if (valueUnwrapped == true) $(element).prettify();
    }
};

viewModel = {
    "Comments": ko.observableArray([
        {
        "Comment": "My Comment",
        "Id": "1",
        "DateCreated": ko.observable("12-01-2012")},
    {
        "Comment": "My Comment 2",
        "Id": "2",
        "DateCreated": ko.observable("12-02-2012")}]),

    "addItem": function() {
        this.Comments.push({
            "Comment": "My Comment X",
            "Id": "2",
            "DateCreated": ko.observable("12-03-2012")
        });
    }

};


$(function() {

    $(".prettyDate").prettify();
});

ko.applyBindings(viewModel);