5

我在这个问题上苦苦挣扎了很长时间,并想为什么不在 Stackoverflow 上问这个问题!我的问题如下:

我正在使用 Durandal 和 BreezeJS 创建一个单页应用程序 (SPA)。每当用户创建新内容时,都会调用 Breeze Lib 中的 createEntity 函数,并返回我的对象​​。我把它推到一个 Ko.observablearray 中,瞧它工作得很好;)

直到这一切都工作正常。

但现在棘手的部分来了,我使用 ko.observablearray 创建一个带有数据绑定的表。每一行都是可单击的,当您单击一个时,将调用 SelectedMemo 函数并成功传递“项目”。但是它来了,当这个函数需要创建自定义模式时,什么也没有发生。我收到一个错误 /app/views/.html 不存在。我知道这里发生了什么,它试图路由到一个不存在的页面,因为没有创建实体的视图和模型视图。

我该如何解决这个问题?这样当我单击表格中的一行时,可以看到我的项目的所有数据吗?

这是到目前为止的代码:

视图模型:

    define(function (require) {
    var router = require('durandal/plugins/router'),
        app = require('durandal/app'),
        system = require('durandal/system'),
        addmemo = require('viewmodels/modals/addMemo'),
        memo = require('viewmodels/modals/memo'), //probably in the models folder but for now its okay
        dataservice = require('services/dataservice'),
        memos = ko.observableArray([]),
        suspendItemSave = false;

    function extendMemo(memoToExtend) {
        if (memoToExtend.isEditing) return; // already extended

        memoToExtend.isEditing = ko.observable(false);
        //Deze functie wordt getriggerd zodra het aanpassen klaar is!

        // listen for changes with Breeze PropertyChanged event
        memoToExtend.entityAspect.propertyChanged.subscribe(function () {
            if (memoToExtend.propertyChangedPending || suspendItemSave) { return; }
            // throttle property changed response
            // allow time for other property changes (if any) to come through
            memoToExtend.propertyChangedPending = true;
            setTimeout(validateAndSaveModifiedItem, 10);

            function validateAndSaveModifiedItem() {
                if (memoToExtend.entityAspect.entityState.isModified()) {
                    if (memoToExtend.entityAspect.validateEntity()) {
                        dataservice.saveChanges();
                    } else { // errors
                        // handleItemErrors(memoToExtend);
                        memoToExtend.isEditing(true); // go back to editing
                    }
                }
                memoToExtend.propertyChangedPending = false;
            }
        });
    }

    function init() {
        dataservice = new dataservice('api/memo');
        dataservice.getAllRows('AllMemos').then(function (data) {
            data.results.forEach(function (item) {
                //Important step otherwise you are not able to create a memo modal!
                extendMemo(item);
                // memos.push(new memo(item));
                memos.push(item);
            });
            system.log("Initialization succesfull!");
        }).fail(function() {
            system.log("Error initialization!");
        });
    }

    init();
    return {
        displayName: 'Estimating page',
        memos: memos,
        activate: function() {
            system.log("Estimating page started!");
        },
        canDeactivate: function() {
            return app.showMessage('Are you sure you want to leave this page and stop estimating?', 'Navigate', ['Yes', 'No']);
        },
        addMemo: function() {
            app.showModal(new addmemo()).then(function (result) {
                //maby first extend? For editing on the go see hot towel
                if (result != undefined) {                
                    var memoN = dataservice.createT({
                        Description: result[0].Description,
                        CreationDate: result[0].CreationDate,
                        Employee: result[0].User,
                        Type: result[0].Type
                    }, 'tblMemo');

                    if (memoN.entityAspect.validateEntity()) {
                        extendMemo(memoN); //deze 
                        //memos.push(new memo(memoN)); //& deze moeten gewrapped worden!!! anders werkt de entityAspect niet
                        memos.push(memoN);
                        dataservice.saveChanges();
                    }

                    /*
                    if (memoN.entityAspect.validateEntity()) {
                        //memos.push(memoN); //this is not the right thing to add this should be a memo Object!
                        extendMemo(memoN);     
                       // extendMemo(newMemo);
                        memos.push(new memo(memoN.Employee(), memoN.Description(), memoN.Type(), memoN.CreationDate()));
                        dataservice.saveChanges();
                    }*/
                }
            }).fail(function(result) {
                //in future show nice error message, hmmm toastr....?
            });
        },
        selectedMemo: function (selectedMemo, element) {
            //need to make a temp object with data before user clicks okay button or what so ever.
            //THis because the input fields are all observables
            if (selectedMemo) {
                selectedMemo.isEditing(true);
            }

            app.showModal(selectedMemo).then(function (result) {
                if (result) {
                    if (selectedMemo) {
                        selectedMemo.isEditing(false);
                        memos.remove(selectedMemo);
                        selectedMemo.entityAspect.setDeleted();
                        dataservice.saveChanges();
                    }
                }
            }).fail(function() {

            });


            //futher use for deleting memo
            /*
            app.showMessage('Do you want to delete this memo?', 'Delete memo', ['Yes', 'No']).then(function (result) {
                if (result == "Yes") {
                    memos.remove(selectedMemo);
                    selectedMemo.entityAspect.setDeleted();
                    dataservice.saveChanges();
                }
            });
            */ 
        }
    };
});

我也尝试创建一个备忘录对象,但是当我这样做时,EntityAspect 在我的项目中丢失了!但是,模态是否有效?如何解决这一切?

更新 2:

我已经重写了我的备忘录模型,所以它将实体保存在一个变量中。但是不再触发 PropertyPendingChanged:S

4

1 回答 1

5

所以我终于做到了:) 我已经对此进行了 3 天的编码,但我得到了它的工作!

这是我对代码所做的,我创建了仅包含实体变量的 Memo.js。在我看来,我称这个变量和他的数据。当用户编辑一个值时,订阅功能会自动触发,新的值会传入数据库。希望它有用,花了我整整 3 天,每次大约 8 小时 XD

意见

备忘录.html

<div class="messageBox">
    <div class="modal-header">
        <h2>Memo details</h2>
    </div>
    <div class="modal-body">
        Employee: <input type="text" data-bind="value: MemoEntity._latestValue.Employee"/>
        Description: <input type="text" data-bind="value: MemoEntity._latestValue.Description"/>
        Type: <input type="text" data-bind="value: MemoEntity._latestValue.Type"/>
    </div>
    <div class="modal-footer">
        <ul class="btn-group">
            <button class="btn" data-bind="click: closeModal">Ok</button>
            <button class="btn btn-primary" data-bind="click: deleteMemo">Delete</button>
        </ul> 
    </div>
</div>

备忘录模型视图

(function () {
    var _this = this;
    //self.dataservice = require('services/dataservice');
    define(function (require) {
        var Memo;
        return Memo = (function () {
            function Memo(dataForMemo) {
                this.MemoEntity = ko.observable(dataForMemo);

               // this.Employee = ko.observable(dataForMemo.entityAspect.entity.Employee());
               // this.Description = ko.observable(dataForMemo.entityAspect.entity.Description());
               // this.Type = ko.observable(dataForMemo.entityAspect.entity.Type());
               // this.CreationDate = ko.observable(dataForMemo.entityAspect.entity.CreationDate());
               // this.isEditing = dataForMemo.entityAspect.entity.isEditing;
            }

            Memo.prototype.closeModal = function () {
                return this.modal.close(false);
            };

            Memo.prototype.deleteMemo = function () {
                return this.modal.close(true);
            };
            return Memo;
        })();
    });
}).call(this);

还有我的页面js

模型视图

define(function (require) {
    var router = require('durandal/plugins/router'),
        app = require('durandal/app'),
        system = require('durandal/system'),
        addmemo = require('viewmodels/modals/addMemo'),
        memo = require('viewmodels/modals/memo'), //probably in the models folder but for now its okay
        dataservice = require('services/dataservice'),
        memos = ko.observableArray([]),
        suspendItemSave = false;

    function extendMemo(memoToExtend) {
        if (memoToExtend.isEditing) return; // already extended

        memoToExtend.isEditing = ko.observable(false);
        //Deze functie wordt getriggerd zodra het aanpassen klaar is!

        // listen for changes with Breeze PropertyChanged event
        memoToExtend.entityAspect.propertyChanged.subscribe(function () {
            if (memoToExtend.propertyChangedPending || suspendItemSave) { return; }
            // throttle property changed response
            // allow time for other property changes (if any) to come through
            memoToExtend.propertyChangedPending = true;
            setTimeout(validateAndSaveModifiedItem, 10);

            function validateAndSaveModifiedItem() {
                if (memoToExtend.entityAspect.entityState.isModified()) {
                    if (memoToExtend.entityAspect.validateEntity()) {
                        dataservice.saveChanges();
                    } else { // errors
                        // handleItemErrors(memoToExtend);
                        memoToExtend.isEditing(true); // go back to editing
                    }
                }
                memoToExtend.propertyChangedPending = false;
            }
        });
    }

    function init() {
        dataservice = new dataservice('api/memo');
        dataservice.getAllRows('AllMemos').then(function (data) {
            data.results.forEach(function (item) {
                //Important step otherwise you are not able to create a memo modal!
                extendMemo(item);
                var t = new memo(item);
                memos.push(t);
                //memos.push(item);
            });
            system.log("Initialization succesfull!");
        }).fail(function() {
            system.log("Error initialization!");
        });
    }

    init();
    return {
        displayName: 'Estimating page',
        memos: memos,
        activate: function() {
            system.log("Estimating page started!");
        },
        canDeactivate: function() {
            return app.showMessage('Are you sure you want to leave this page and stop estimating?', 'Navigate', ['Yes', 'No']);
        },
        addMemo: function() {
            app.showModal(new addmemo()).then(function (result) {
                //maby first extend? For editing on the go see hot towel
                if (result != undefined) {                
                    var memoN = dataservice.createT({
                        Description: result[0].Description,
                        CreationDate: result[0].CreationDate,
                        Employee: result[0].User,
                        Type: result[0].Type
                    }, 'tblMemo');

                    if (memoN.entityAspect.validateEntity()) {
                        extendMemo(memoN); //deze 
                        memos.push(new memo(memoN)); //& deze moeten gewrapped worden!!! anders werkt de entityAspect niet
                        dataservice.saveChanges();
                    }

                    /*
                    if (memoN.entityAspect.validateEntity()) {
                        //memos.push(memoN); //this is not the right thing to add this should be a memo Object!
                        extendMemo(memoN);     
                       // extendMemo(newMemo);
                        memos.push(new memo(memoN.Employee(), memoN.Description(), memoN.Type(), memoN.CreationDate()));
                        dataservice.saveChanges();
                    }*/
                }
            }).fail(function(result) {
                //in future show nice error message, hmmm toastr....?
            });
        },
        selectedMemo: function (selectedMemo, element) {
            //need to make a temp object with data before user clicks okay button or what so ever.
            //THis because the input fields are all observables
        //    if (selectedMemo) {
                //selectedMemo.MemoEntity._latestValue.entity.isEditing(true);
               // selectedMemo.isEditing(true);
        //    }

            app.showModal(selectedMemo).then(function (result) {
                if (result) {


                    app.showMessage('Do you want to delete this memo?', 'Delete memo', ['Yes', 'No']).then(function (resultMes) {
                        if (resultMes == "Yes") {
                            memos.remove(selectedMemo);
                            selectedMemo.MemoEntity._latestValue.entityAspect.setDeleted();
                            dataservice.saveChanges();
                        }
                    });


                }
            }).fail(function() {

            });


            //futher use for deleting memo
            /*
            app.showMessage('Do you want to delete this memo?', 'Delete memo', ['Yes', 'No']).then(function (result) {
                if (result == "Yes") {
                    memos.remove(selectedMemo);
                    selectedMemo.entityAspect.setDeleted();
                    dataservice.saveChanges();
                }
            });
            */

        }
    };
});

我对备忘录的看法

<table class="table table-hover table-striped">
                    <thead>
                        <tr>
                            <th>Created</th><th>User</th><th>Memo</th><th>Type</th>
                        </tr>
                    </thead>
                    <tbody data-bind="visible: memos().length > 0, foreach: memos">
                        <tr data-bind="click: $parent.selectedMemo">
                            <td data-bind="text: MemoEntity._latestValue.CreationDate"></td>
                            <td data-bind="text: MemoEntity._latestValue.Employee"></td>
                            <td data-bind="text: MemoEntity._latestValue.Description"></td>
                            <td data-bind="text: MemoEntity._latestValue.Type"></td>
                        </tr>
                    </tbody>
                    <tbody data-bind="visible: memos().length == 0">
                        <tr>
                            <td colspan="4">NO MEMOS ADDED YET</td>
                        </tr>
                    </tbody>
                </table> 

希望能帮助到你 ;)

于 2013-04-03T12:08:28.307 回答