我在我的PHP Web应用程序中使用DurandalJS框架。我正在利用DurandalJS框架功能来显示模态视图。
我有一个主页home.html，其中包含指向名为autocomplete.html的网页的链接。单击此链接后，它会在模态视图（DurandalJS提供的功能）中打开autocomplete.html页面。
我还使用jQuery-UI自动完成功能为文本框创建自动完成功能。当用户在文本框中键入任何内容时，他会根据他通过键盘输入的字符获取建议列表。
此处的问题是，如果autocomplete.html页面在浏览器中独立运行，则自动完成功能有效。但是，当页面显示在模态中时，即通过DurandalJS框架运行（导航）项目时，此功能不会运行。
任何人都可以告诉我我哪里错了？最早的回复将受到高度赞赏。
我的项目的源代码如下。请注意，我提供源代码的顺序与执行DurandalJS导航调用堆栈的顺序相同。我的应用程序的流程是，index.php＆gt;＆gt;＆gt; main.js＆gt;＆gt;＆gt; shell.js＆gt;＆gt;＆gt; shell.html＆gt;＆gt;＆gt; home.js＆gt;＆gt;＆gt; home.html＆gt;＆gt;＆gt; autocomplete.js＆gt;＆gt;＆gt; autocomplete.html。
autocomplete.js＆gt;＆gt;＆gt;当用户点击home.html页面上的“转到自动填充”链接时，会执行autocomplete.html调用堆栈。
main.js
require.config({
paths: {
'text': 'durandal/amd/text'
}
});
define(function (require) {
var app = require('durandal/app'),
viewLocator = require('durandal/viewLocator'),
system = require('durandal/system'),
router = require('durandal/plugins/router');
//>>excludeStart("build", true);
system.debug(true);
//>>excludeEnd("build");
app.start().then(function () {
//The following statement is to help DurandalJS to find files only according to their names.
//Replace 'viewmodels' in the moduleId with 'views' to locate the view.
//Look for partial views in a 'views' folder in the root.
viewLocator.useConvention();
//configure routing
router.useConvention();
router.mapNav("pages/home");
router.mapNav("pages/autocomplete");
app.adaptToDevice();
//Show the app by setting the root view model for our application with a transition.
app.setRoot('viewmodels/shell', 'entrance');
});
});
shell.js
define(function (require) {
var router = require('durandal/plugins/router');
return {
router: router,
activate: function () {
return router.activate('pages/home');
}
};
});
shell.html
<br />
<br />
<br />
<br />
<div class="container-fluid page-host">
<!--ko compose: {
model: router.activeItem, //wiring the router
afterCompose: router.afterCompose, //wiring the router
transition:'entrance', //use the 'entrance' transition when switching views
cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
}--><!--/ko-->
</div>
home.js
// JavaScript Document
//This file loads the respective page's ViewModel (<Page>.js) and displays the View (<page>.html)
define(function (require) {
self.app = require('durandal/app');
return {
movies: ko.observable(),
activate: function() {
var self = this;
//The following code in the function creates a modal view for the autocomplete page
self.viewAutoCompleteModal = function(AutoComplete, element) {
app.showModal("viewmodels/pages/autocomplete");
};
}
};
});
home.html的
<div id="applicationHost">
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="brand">
<span>My application</span>
</a>
</div>
</div>
</div>
</div>
<!--The following lines of code create href links for the My Application pages and directs the DurandalJS to the respective pages. The data-bind attribute calls the view<Page>Modal functions (which create a Modal view) which is defined in the ViewModel (<Page>.js file)-->
<br />
<br />
<a href="#/pages/autocomplete" data-bind="click: viewAutoCompleteModal">Go to Autocomplete</a>
autocomplete.js
// JavaScript Document
define(function (require) {
var router = require('durandal/plugins/router');
var moviesRepository = require("repositories/moviesRepository");
return {
activate: function (context) {
}
};
});
autocomplete.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>jQuery-UI Autocomplete Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://localhost/rockontechnologies/Scripts/Script1.10.3/jquery-1.9.1.js"></script>
<script src="http://localhost/rockontechnologies/Scripts/Script1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="modal-footer">
<ul class="btn-group">
<button class="btn" data-bind="click: closeModal">Exit</button>
</ul>
</div>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
提前谢谢。
答案 0 :(得分：1)
我回答了一个类似的问题here，它会对你有所帮助。
但是你的autocomplete.html是错误的，在由Durandal撰写时无效。您需要将其转换为durandal样式的html页面。
将脚本标记添加到主页。在Hot Towel中，这是由bundle管理的，所以如果使用PHP，我不能完全确定你添加它们的位置。
删除HTML，SCRIPT，META等......只需保留纯HTML标记即可。
例如：
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
然后在autocomplete.js文件中添加附加方法或使用Durandal＆lt; 2.0.0你添加一个viewAttached方法。
define(function (require) {
var router = require('durandal/plugins/router');
var moviesRepository = require("repositories/moviesRepository");
return {
activate: function (context) {
},
attached: function (view) {
var $tagInput = $(view).find('#tags');
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$tagInput.autocomplete({
source: availableTags
});
}
};
});
如果您仍然遇到问题并且很乐意帮忙，请告诉我。