requirejs - Durandal 和 Zurb 基础，我应该在哪里初始化基础？

我一直在使用基本的 Durandal HTML 模板，但我已将 Bootstrap 替换为 Zurb Foundation。一切都运行良好，除了我无法打开任何模式、下拉菜单或任何需要初始化基础的东西的问题。通常，将以下内容放在您的网页正文中以执行此操作:

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

我试图把它放在 Index.html , Shell.html甚至在 View 模型和 View 中随机出现。此外，我尝试从 main.js 中的 JS 和激活部分中的 View 模型本身初始化它。这些都不起作用。我发现的(希望是非常临时的)解决方法是在单击按钮打开模式时从我的 javascript 中实际初始化 Foundation:

$(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);

如果有人能指出我哪里出错了，我将不胜感激。

最佳答案

当Foundation在下面的 block 中初始化它需要它绑定(bind)方法的所有对象 modals , dropdowns等在 DOM 中。这意味着您可以执行以下操作以确保大多数基础功能都存在。

初始化代码

$(document).foundation();

给它一些KISS并保持简单，您可以将其添加到 attached 中的每个“viewModel”中或 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();
    }
  };
});

此外，我对模态使用微模板(在 Foundation 初始化期间通常不在 DOM 中)，我发现的一个技巧是针对对象本身初始化 Foundation。

示例

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

这适用于使用 data attributes 的东西例如模态并允许您运行Foundation针对这些对象的方法。

关于其他答案中提到的带有 KnockOut.js 的基金会。我喜欢这个 Foundation和 KnockOut是我的面包和黄油，但两者不能很好地协同工作。最后，您正在重写所有 Foundation 以与 KO 合作，我个人没有时间这样做，但希望看到它发生。

如果你真的需要响应式设计和 Foundation 的所有花里胡哨的功能并入 Durandal你真的需要使用Bootstrap因为它确实以兼容的方式提供了这些功能。

关于requirejs - Durandal 和 Zurb 基础，我应该在哪里初始化基础？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21915259/

requirejs - Durandal 和 Zurb 基础，我应该在哪里初始化基础？

上一篇：xcode - 在项目中查找下一个的快捷方式

下一篇：visual-studio - 已加载Windows minidump文件，现在无法加载二进制文件？