绑定的可观察数组更改后表未刷新

时间:2013-04-22 19:50:55

标签: knockout.js breeze single-page-application durandal ko.observablearray

我被困住了,希望得到一些帮助!

我的ViewModel上有一个create方法,它调用一个轻微的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公开了VM中使用的这个功能,将新办公室推入可观察数组:

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

1 个答案:

答案 0 :(得分:0)

发现问题......

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

我更改了<a href>的按钮标记,修复了相同的样式和问题!