2013-04-02 4 views
4

Я долгое время с этой проблемой борюсь и думал, почему бы не спросить об этом здесь, в Stackoverflow! Мой вопрос заключается в следующем:Показать Modal в Durandal с BreezeJS

Я создаю одностраничное приложение (SPA) с Durandal и BreezeJS. Всякий раз, когда пользователь создает что-то новое, вызывается функция createEntity из Breeze Lib, и я возвращаю свой объект. Я подталкиваю это в Ko.observablearray и voila, он отлично работает;)

До этого все работает нормально.

Но теперь эта сложная часть, я использую ko.observablearray для создания таблицы с привязкой данных. Каждая строка является кликабельной, и когда вы нажимаете на нее, вызывается функция SelectedMemo и успешно завершается «элемент». Но здесь, когда эта функция нуждается в создании пользовательского модального, ничего не происходит. Я получаю сообщение об ошибке /app/views/.html не существует. Я знаю, что здесь происходит, он пытается перенаправить на не существующую страницу, потому что нет View и model-view созданного объекта.

Как исправить эту проблему? Итак, когда я нажимаю строку в своей таблице, вижу все данные моего элемента?

это код до сих пор:

показов модель:

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(); 
       } 
      }); 
      */ 
     } 
    }; 
}); 

Также я tryied создать объект Memo, но когда я делаю что EntityAspect теряется в моем товаре! Но тогда модальный работает? Как решить все это?

UPDATE 2:

Я переписал свою Memo модель так он держит объект в переменной. Но PropertyPendingChanged больше не запускается: S

+0

является selectedMemo драм модуля? –

+0

Я отредактировал свой вопрос и загрузил всю мою модель обзора –

ответ

5

ТАК Я, наконец, сделал это :) Я закодировал это на 3 дня, но у меня это получилось!

Вот что я сделал с моим кодом, я создал Memo.js, который содержит только переменную с сущностью. По моему мнению, я называю эту переменную и свои данные. Когда пользователь редактирует значение, функция подписки автоматически запускается, и новое значение передается в базе данных. Надеюсь, что его полезно, у меня ушло 3 полных дня около 8 часов каждый XD

Просмотров

memo.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> 

Memo модель-вид

(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> 

Надеется, что это помогает;)