Durandal和Zurb基金會，我應該在哪裏初始化基礎？

Question

我一直在使用基本的Durandal HTML模板，但我用Zurb基金會取代了Bootstrap。除了無法打開任何模式，下拉菜單或需要基礎初始化的任何問題之外，一切都運行良好。一般人會放置在以下網頁的身體做這個：

<script> 
    $(document).foundation(); 
</script> 

我試圖把這個在Index.html，Shell.html並在視圖模型和視圖，甚至隨意。此外，我試圖從main.js中的JS中初始化它，並在activate部分中使用viewmodel本身。沒有一個工作。我已經找到了（希望非常暫時的）解決辦法是實際初始化基金會形成我的javascript，點擊一個按鈕打開模態時：

$(document).foundation(); 
$("#myModal").foundation("reveal", "open"); 

我要去哪裏錯了？

我main.js供參考：

(function() { 
    requirejs.config({ 
    paths: { 
     text: "../lib/require/text", 
     durandal: "../lib/durandal/js", 
     plugins: "../lib/durandal/js/plugins", 
     transitions: "../lib/durandal/js/transitions", 
     knockout: "../lib/knockout/knockout-2.3.0", 
     jquery: "../lib/jquery/jquery-1.9.1", 
     foundation: "../lib/foundation/js/foundation/foundation", 
     "foundation.abide": "../lib/foundation/js/foundation/foundation.abide", 
     "foundation.accordion": "../lib/foundation/js/foundation/foundation.accordion", 
     "foundation.alert": "../lib/foundation/js/foundation/foundation.alert", 
     "foundation.clearing": "../lib/foundation/js/foundation/foundation.clearing", 
     "foundation.dropdown": "../lib/foundation/js/foundation/foundation.dropdown", 
     "foundation.interchange": "../lib/foundation/js/foundation/foundation.interchange", 
     "foundation.joyride": "../lib/foundation/js/foundation/foundation.joyride", 
     "foundation.magellan": "../lib/foundation/js/foundation/foundation.magellan", 
     "foundation.offcanvas": "../lib/foundation/js/foundation/foundation.offcanvas", 
     "foundation.orbit": "../lib/foundation/js/foundation/foundation.orbit", 
     "foundation.reveal": "../lib/foundation/js/foundation/foundation.reveal", 
     "foundation.tab": "../lib/foundation/js/foundation/foundation.tab", 
     "foundation.tooltip": "../lib/foundation/js/foundation/foundation.tooltip", 
     "foundation.topbar": "../lib/foundation/js/foundation/foundation.topbar" 
    }, 
    shim: { 
     jquery: { 
     exports: "jQuery" 
     }, 
     foundation: { 
     deps: ["jquery"] 
     }, 
     "foundation.abide": { 
     deps: ["foundation"] 
     }, 
     "foundation.accordion": { 
     deps: ["foundation"] 
     }, 
     "foundation.alert": { 
     deps: ["foundation"] 
     }, 
     "foundation.clearing": { 
     deps: ["foundation"] 
     }, 
     "foundation.dropdown": { 
     deps: ["foundation"] 
     }, 
     "foundation.interchange": { 
     deps: ["foundation"] 
     }, 
     "foundation.joyride": { 
     deps: ["foundation"] 
     }, 
     "foundation.magellan": { 
     deps: ["foundation"] 
     }, 
     "foundation.offcanvas": { 
     deps: ["foundation"] 
     }, 
     "foundation.orbit": { 
     deps: ["foundation"] 
     }, 
     "foundation.reveal": { 
     deps: ["foundation"] 
     }, 
     "foundation.tab": { 
     deps: ["foundation"] 
     }, 
     "foundation.tooltip": { 
     deps: ["foundation"] 
     }, 
     "foundation.topbar": { 
     deps: ["foundation"] 
     } 
    } 
    }); 

    define(["durandal/system", "durandal/app", "durandal/viewLocator", "foundation"], function(system, app, viewLocator, foundation) { 
    system.debug(true); 
    app.title = "Durandal Starter Kit"; 
    app.configurePlugins({ 
     router: true, 
     dialog: true, 
     widget: true 
    }); 
    app.start().then(function() { 
     viewLocator.useConvention(); 
     app.setRoot("viewmodels/shell", "entrance"); 
    }); 
    }); 

}).call(this); 

shell.html：

<div> 
    <nav class="top-bar hide-for-small"> 
     <ul class="title-area"> 
      <!-- Title Area --> 
      <li class="name"> 
       <h4 style="color: white">KRS Template</h4> 
      </li> 
      <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
     </ul> 
     <div class="top-bar-section"> 
      <!-- Right Nav Section --> 
      <ul class="right" data-bind="foreach: router.navigationModel"> 
       <li data-bind="css: { active: isActive }"> 
        <a data-bind="attr: { href: hash }, html: title"></a> 
       </li> 
      </ul> 
     </div> 
    </nav> 
    <div class="container-fluid page-host" data-bind="router: { transition: 'entrance', cacheViews: true }"></div> 
</div> 

shell.js：

(function() { 

    define(["plugins/router", "durandal/app", "foundation"], function(router, app, foundation) { 
    return { 
     router: router, 
     activate: function() { 
     router.map([ 
      { 
      route: "", 
      title: "Welcome", 
      moduleId: "viewmodels/welcome", 
      nav: true 
      }, { 
      route: "List", 
      moduleId: "viewmodels/ListOfItems", 
      nav: true 
      } 
     ]).buildNavigationModel(); 
     return router.activate(); 
     } 
    }; 
    }); 

}).call(this); 

當實際的問題在於：ListOfItems.html：

<section> 
    <div> 
     <h2 data-bind="text: displayName" style="text-align: center"></h2> 
     <div class="row"> 
      <div class="small-12 column"> 
       <div data-bind="foreach: items"> 
        <div class="panel"> 
         <div class="row"> 
          <div class="small-6 column"> 
           <b>Number: <span data-bind="text: NumberA"></span></b> 
           <br /> 
           <b>Number B: <span data-bind="text: NumberB"></span></b> 
           <br /> 

          </div> 
          <div class="small-6 column"> 
           <b>Text A: <span data-bind="text: StringA"></span></b> 
           <br /> 
           <b>Text B: <span data-bind="text: StringB"></span></b> 
           <br /> 
           <b>Text C: <span data-bind="text: StringC"></span></b> 
           <br /> 
          </div> 
          <div class="row"> 
           <div class="small-12 column"> 
            <a class="button" data-bind="click: function() { $parent.openModal(this); }">Open Modal</a> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div id="myModal" class="reveal-modal" data-reveal> 
      <h2>Edit Item</h2> 
      <p class="lead">Please alter the item</p> 
      <input id="Stepper" type="number" data-bind="value: ModalNumberA" /> 
      <input id="Number1" type="number" data-bind="value: ModalNumberB" /> 
      <input type="text" placeholder="Scope name" data-bind="value: ModalStringA" /> 
      <input type="text" placeholder="Scope name" data-bind="value: ModalStringB" /> 
      <input type="text" placeholder="Scope name" data-bind="value: ModalStringC" /> 
      <a class="small button" data-bind="click: saveModalChanges">Save</a> 
      <a class="small button" data-bind="click: closeModal">Close</a> 
      <a class="close-reveal-modal">&#215;</a> 
     </div> 
    </div> 
</section> 

ListOfItems.js（從CoffeeScript的生成）：

(function() { 
    var _this = this; 

    define(["durandal/app", "knockout", "krs", "jquery", "foundation.reveal", "foundation.dropdown"], function(app, ko, krs, $, reveal, dropdown) { 
    return { 
     displayName: "List of Items", 
     items: ko.observableArray([]), 
     result: ko.observable(), 
     ModalNumberA: ko.observable(), 
     ModalNumberB: ko.observable(), 
     ModalStringA: ko.observable(), 
     ModalStringB: ko.observable(), 
     ModalStringC: ko.observable(), 
     ItemBeingEdited: ko.observable(), 
     activate: function() { 
     var _this = this; 
     return callTheWebApi("http://localhost:54129/api/mocked/GetMockedViewModelList", "GET", "", function(result) { 
      console.log(result); 
      _this.items(result); 
     }); 
     }, 
     openModal: function(item) { 
     this.ItemBeingEdited(item); 
     this.ModalNumberA(item.NumberA); 
     this.ModalNumberB(item.NumberB); 
     this.ModalStringA(item.StringA); 
     this.ModalStringB(item.StringB); 
     this.ModalStringC(item.StringC); 
     $(document).foundation(); 
     return $("#myModal").foundation("reveal", "open"); 
     }, 
     saveModalChanges: function() { 
     var itemBeingEdited, 
      _this = this; 
     itemBeingEdited = new Object(); 
     itemBeingEdited.NumberA = this.ModalNumberA(); 
     itemBeingEdited.NumberB = this.ModalNumberB(); 
     itemBeingEdited.StringA = this.ModalStringA(); 
     itemBeingEdited.StringB = this.ModalStringB(); 
     itemBeingEdited.StringC = this.ModalStringC(); 
     return callTheWebApi("http://localhost:54129/api/mocked/SaveMockedViewModel", "GET", "{'model':" + JSON.stringify(itemBeingEdited) + "}", function(success) { 
      var templist; 
      if (success) { 
      _this.items()[_this.items().indexOf(_this.ItemBeingEdited())] = itemBeingEdited; 
      templist = _this.items(); 
      _this.items(null); 
      _this.items(templist); 
      return $("#myModal").foundation("reveal", "close"); 
      } 
     }); 
     }, 
     closeModal: function() { 
     return $("#myModal").foundation("reveal", "close"); 
     } 
    }; 
    }); 

}).call(this); 

如果有人可以指出我要去的地方錯了，我真的很感激它。

Answer 1

我相信腳本標籤被durandal從視圖中剝離出來，所以這可能是爲什麼沒有解決。

不確定項目的結構或性質，但如果您的durandal應用程序正在通過網頁交付，您可以在網頁中初始化基礎。

或者，您可以在shell視圖模型的compositionComplete或附加方法中初始化它。

Answer 2

您可能需要考慮爲Foundation創建自定義Knockout綁定。否則，您將在整個視圖模型中使用DOM參考，這在大多數情況下是Durandal的反模式。

如果您不熟悉定製Knockout綁定，您可以在http://knockoutjs.com/documentation/custom-bindings.html上閱讀有關它們。如果您需要自定義綁定的幫助，請返回此處，我很樂意提供幫助。

如果我記得，基礎（）是一個重量級的初始化調用。你只需要做一次。一個簡單的自定義綁定放在你的shell.html將簡化初始化 - Durandal/Knockout方式。

Answer 3

當Foundation在下面的塊中被初始化時，它需要它所綁定的所有對象，像modals，dropdowns等方法都在DOM內。這意味着您可以執行以下操作來確保大多數基礎功能都存在。

初始化代碼

$(document).foundation(); 

給它一些KISS，並保持它簡單，你可以這個attached或compositionComplete回調中所列here添加到每個「視圖模型」。這將確保Foundation初始化時所有元素都在DOM內。

例

define(function(require){ 
    var backend = require('backend'); 

    return { 
    customers:ko.observableArray([]), 
    activate:function(){ 
     // This runs as soon as the viewModel is loaded 
    } 
    attached:function(){ 
     // This runs as soon as the view is full rendered 
     $(document).foundation(); 
    } 
    }; 
}); 

此外，我使用的微模板用於模態（通常不在基礎初始化期間DOM）和一個特技我發現是初始化對對象本身的基礎。

例

$('#dynamicElement').foundation(); 

這適用於使用data attributes如情態動詞，並允許您運行鍼對這些對象Foundation方法的東西。

---

關於與KnockOut.js基金會提到了其他的答案。我已經看到了這個，因爲我愛Foundation和KnockOut是我的麪包和黃油，但兩者只是不能很好地結合在一起。最後，你正在重寫所有的基金會與KO合作，以及我個人沒有時間，但很樂意看到它發生。

如果你真的需要響應式設計和基金會的所有花裏胡哨併入Durandal你真的需要使用Bootstrap，因爲它確實以兼容的方式提供這些功能。