Durandal對話框

Question

請幫忙。我正在嘗試爲durandal的對話框插件創建一個挖空模板。有沒有人能爲我提供一個基本的例子。以下是我的示例代碼。但我不能讓它工作..

(function (require) { 
    var app = require('durandal/app'), 
    unitofwork = require('services/unitofwork'), 
    dialog = require('plugins/dialog'); 


    var self = this; 
    var uow = unitofwork.create(); 
    var userlist = ko.observableArray(); 
    var selecteduser = ko.observable(); 

    ko.dialog = { 
    // Defines a view model class you can use to populate a grid 

     viewModel: { 
      selecteduser: selecteduser, 
      userlist: userlist, 
      ok: function() { 
       console.log(this.selecteduser()); 
       dialog.close(this, this.selecteduser()); 
      }, 
      cancel: function() { 
       console.log(this.selecteduser()); 
       dialog.close(this, ""); 
      }, 
      canDeactivate: function() { 
       return dialog.showMessage(this.selecteduser()); 
      }, 
      show: function() { 
       var query = breeze.EntityQuery 
            .from("GetUsersByRole") 
            .withParameters({ roleName: "EDITOR" }); // id=3 has two UserRoles 

       uow.userrepository.CustomQuery(query).then(function (data) { 
        userlist(data); 
       }); 

       console.log(userlist); 

       return dialog.show(this); 
      } 
     } 
    }; 

    // Templates used to render the grid 
    var templateEngine = new ko.nativeTemplateEngine(); 

    templateEngine.addTemplate = function (templateName, templateMarkup) { 
     document.write("<script type='text/html' id='" + templateName + "'>" + templateMarkup + "<" + "/script>"); 
    }; 

    templateEngine.addTemplate("ko_dialog_dialog", "\ 
        <div class=\"messageBox\">\ 
         <div class=\"modal-header\">\ 
          <h3>\Assign to Editor</h3>\ 
         </div>\ 
         <div class=\"modal-body\">\ 
          <form data-bind=\"submit: ok\">\ 
           <label>\ 
            Editor Name:<br />\ 
            <select id=\"selCaseStatus\"\ 
             class=\"span2 shadow_select\"\ 
             data-bind=\"value: selecteduser, options: userlist, optionsText: 'UserName', optionsValue: 'UserName', optionsCaption: '--select--'\">\ 
            </select>\ 
           </label>\ 
          </form>\ 
         </div>\ 
         <div class=\"modal-footer\">\ 
          <button class=\"btn btn-primary\" data-bind=\"click: ok\">\Ok&nbsp;<i class=\"icon-thumbs-up\">\</i>\</button>\ 
          <button class=\"btn btn-primary\" data-bind=\"click: cancel\">\Cancel&nbsp;<i class=\"icon-thumbs-down\">\</i>\</button>\ 
         </div>\ 
        </div>" 
       ); 

    // The "dialog" binding 
    ko.bindingHandlers.dialog = { 
     init: function() { 
      return { 'controlsDescendantBindings': true }; 
     }, 
     // This method is called to initialize the node, and will also be called again if you change what the grid is bound to 
     update: function (element, viewModelAccessor, allBindingsAccessor) { 
      var viewModel = viewModelAccessor(), allBindings = allBindingsAccessor(); 

      // Empty the element 
      while (element.firstChild) 
       ko.removeNode(element.firstChild); 

      // Allow the default templates to be overridden 
      var panelTemplateName = allBindings.leftPanelTemplate || "ko_dialog_dialog"; 
      //,pageLinksTemplateName = allBindings.simpleGridPagerTemplate || "ko_simpleGrid_pageLinks"; 

      // Render the main grid 
      var panelContainer = element.appendChild(document.createElement("DIV")); 
      ko.renderTemplate(panelTemplateName, viewModel, { templateEngine: templateEngine }, panelContainer, "replaceNode"); 
     } 
    }; 
})(); 

Answer 1

迪朗達爾已經有您正在尋找的功能，所以沒有必要去創造你自己的東西。開始閱讀http://durandaljs.com/documentation/Showing-Message-Boxes-And-Modals.html。 OOTB使用的示例可以在示例部分找到，例如http://dfiddle.github.io/dFiddle-2.0/#modal

如需進一步定製，請查看 http://durandaljs.com/documentation/api/#module/dialog/method/addContext。

最後這裏是@EisenbergEffect不得不說的創造新的對話框模板：

在項目中創建包含消息框，你想 標記一個新的.html視圖。然後，無論是在main.js中還是在shell中，在使用消息框之前， 。調用 dialog.MessageBox.setViewUrl（'path/to/your/view'）;