Таблица не обновляется после изменения связанного наблюдаемого массива

Question

Я застрял и был бы признателен за помощь!

У меня есть метод create в моей ViewModel, который вызывает простой метод CreateEntity для добавления нового элемента в наблюдаемый массив типа Office. Все это идет хорошо, и длина наблюдаемого массива соответственно увеличивается - НО!

по какой-то странной причине строки таблицы не обновляются соответственно - что я делаю неправильно???

Это таблица разметки:

---

<table class="table table-striped table-bordered table-condensed" data-bind='visible: offices().length > 0'>
            <thead>
                <tr>
                    <td class="thead">Office Name</td>
                    <td class="thead">Support Tel.</td>
                    <td class="thead">Support Email</td>
                    <td class="thead">Support Fax</td>
                    <td class="thead">Ftp URL</td>
                    <td class="thead" />
                </tr>
            </thead>
            <tbody data-bind='foreach: offices'>
                <tr class="">
                    <td>
                        <input data-bind='value: officeName' />
                    </td>
                    <td>
                        <input data-bind='value: supportNo' />
                    </td>
                    <td>
                        <input data-bind='value: supportEmail' />
                    </td>
                    <td>
                        <input data-bind='value: supportFax' />
                    </td>
                    <td>
                        <input data-bind='value: supportFtp' />
                    </td>
                    <td>
                        <div class="button-bar">
                            <button class="btn btn-danger"
                                data-bind="click: deleteOffice, disable: hasChanges">
                                Delete
                            </button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

Это мой код ViewModel

define(['services/officesEntityService',
        'durandal/plugins/router',
        'durandal/system',
        'durandal/app',
        'services/logger'],
    function (officesEntityService, router, system, app, logger) {

        var offices = ko.observableArray();
        var isSaving = ko.observable(false);
        var isDeleting = ko.observable(false);

        var activate = function () {
            return officesEntityService.getOffices(offices);
        };

       ...

        var addOffice = function () {
            offices.push(officesEntityService.createOffice());
        }

        ...

        var vm = {
            offices: offices,
            isSaving: isSaving,
            isDeleting:isDeleting,
            activate: activate,
            goBack: goBack,
            hasChanges: hasChanges,
            cancel: cancel,
            canSave: canSave,
            save: save,
            canAdd:canAdd,
            addOffice:addOffice,
            deleteOffice: deleteOffice,
            canDeactivate: canDeactivate,            
            title: 'Offices Administration'
        };
        return vm;
    });

Наконец, мой Breeze Data Service предоставляет эту функцию, используемую в виртуальной машине, для помещения нового офиса в наблюдаемый массив:

var createOffice = function () {
            return manager.createEntity('Office', { officeId: jQuery.Guid.New(), officeName: 'New Office'});
        };

Answer 1

Нашел проблему...

 <td>
     <div class="button-bar">
         <button class="btn btn-danger"
                 data-bind="click: deleteOffice, disable: hasChanges">Delete
         </button>
     </div>
 </td>

Я изменил тег кнопки для <a href>, применяется тот же стиль и проблема исправлена!