Диалог 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

Durandal уже имеет свои особенности, которые вы ищете, так что нет никакой необходимости придумывать что-то самостоятельно. Начать чтение 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, либо в вашей оболочке, перед вы используете окно сообщения. Вызвать dialog.MessageBox.setViewUrl ('путь/to/your/view');