Knockout Binding issue

by farina

HTML

<script src="http://tsosieindustries.com/js/jquery-1.7.1.js"></script>
<script src="http://tsosieindustries.com/js/knockout-2.0.0.debug.js"></script>
<script id="dashboardIssueTemplate" type="text/html">        
    <!--ko foreach: $data-->    
    <div data-bind="click: $root.expand, attr: {'id': id, 'data-touchid': lastTouchId }" class="incidentHeadContainer">
        <div class="incidentHeader">
            <div class="incidentHeadTitleContainer" data-bind="text: title"></div>
            <div class="incidentHeadTimestampContainer" data-bind="text: createdOn"></div>
            <div class="incidentHeadResourceContainer" data-bind="text: servicename"></div>            
        </div>
        <div data-bind="css: {'trippleArrow-icon-down': inEdit, 'trippleArrow-icon-up': !inEdit()}" class="incidentHandle trippleArrow-icon"></div>
    </div>
    <div class="incidentContentContainer" data-bind="attr: {'data-incidentData': id}, template: {name: 'incidentContentTemplate', data: $data}"></div>
    <!-- /ko -->
</script>

<script id="incidentContentTemplate" type="text/html">
    <div class="incidentContentPanelOneContainer">Trend</div>
    <div class="incidentContentPanelThreeContainer">Something</div>
    <div class="incidentContentPanelTwoContainer">
        Details
        <div class="incidentHistoryContainer" data-bind="template: {name: 'incidentHistoryTemplate', foreach: incidentHistory}"></div>
    </div>
</script>

<script id="incidentHistoryTemplate" type="text/html">
    <div class="incidentHistoryHeadContainer">
        <div class="incidentHistoryHeader">
            <div class="incidentHistoryTimeContainer">time</div>
            <div class="incidentHistoryUserContainer" data-bind="text: TouchCreatedByUserUserName"></div>
            <div class="incidentHistoryContentContainer" data-bind="text: Comment"></div>
        </div>
    </div>
</script>

JavaScript 1.7

(function ($, window, undefined) {
    var dashboard = (function () {
        var _self = window.dashboard || {};
        var _configurations = {
        };

        
        var _viewModel = function (db) {
            var _model = this;
            _model.incidents = ko.observableArray();
            _model.incidentOpen = ko.computed(function () {
                var open = ko.utils.arrayFirst(_model.incidents(), function (incident) {
                    if (incident.inEdit()) return incident;
                });

                if (open) return true;
                return false;
            });
            _model.updateIncidents = function () {
                db.getHotList(function (json) {
                    _model.incidents([]);
                    $.each(json, function (i, obj) {
                        _model.addIncident(obj);
                    });
                });

            };
            _model.expand = function (data, event) {
                // close content window for all incidents
                $("div[data-incidentData]").not("div[data-incidentData='" + data.id() + "']").slideUp("fast", function () {
                    // turn off edit mode for all incidents
                    ko.utils.arrayForEach(_model.incidents(), function (incident) {
                        if (incident.id() !== data.id()) {
                            incident.inEdit(false);
                        }
                    });
                });

                _model.updateIncidentDetails(data);

                $("div[data-incidentData='" + data.id() + "']").slideToggle("fast", function () {
                    if ($(this).is(":visible")) {
                        data.inEdit(true);
                    } else {
                        data.inEdit(false);
                    }
                });
            };
            _model.addIncident = function (obj) {
                var checked = obj.UserTouches > 0 ? true : false;
               ...