Durandal和Zurb基金会,我应该在哪里初始化基础？

Question

我一直在使用基本的Durandal HTML模板,但我已经用Zurb Foundation替换了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 或附加方法中初始化它。