我一直在使用基本的Durandal
HTML模板,但我已经用Zurb Foundation替换了Bootstrap.一切都运作良好,除了我无法打开任何模态,下拉或任何需要基础初始化的问题.通常会将以下内容放在您网页的正文中以执行此操作：
<script> $(document).foundation(); </script>
我试图将它放在Index.html,Shell.html中,甚至在viewmodel和view中随机放置.此外,我尝试在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",function(router,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">×</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","{'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在下面的块中初始化时,它需要所有绑定方法的对象,以便在DOM中使用模态,下拉等.这意味着您可以执行以下操作以确保存在大多数基础功能.
初始化代码
$(document).foundation();
给它一些KISS并保持简单,你可以将它添加到附件或compositionComplete回调中的每个’viewmodel’,如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();
这适用于使用数据属性(如模态)的事物,并允许您针对这些对象运行Foundation方法.
关于KnockOut.js的基金会在其他答案中提及.我已经调查了这个,因为我爱基金会和KnockOut是我的面包和黄油,但两者只是不能很好地一起工作.最后你要重写所有的基金会与KO一起工作,而且我个人没有时间做这件事,但很想看到它发生.
如果你真的需要响应式设计和基础融入Durandal的所有铃声和口哨,你真的需要使用Bootstrap,因为它以兼容的方式提供这些功能.