Javascript 在Durandal模板项目中使用时间选择器或日期选择器
我对杜兰达尔很陌生。我已经尝试过在项目中添加时间选择器，如下所示。 schedule.js代码：Javascript 在Durandal模板项目中使用时间选择器或日期选择器,javascript,durandal,Javascript,Durandal,我对杜兰达尔很陌生。我已经尝试过在项目中添加时间选择器，如下所示。 schedule.js代码： define([], function (require) { var script = require('jquery.ptTimeSelect'); var app = require('durandal/app'); var vm = { viewAttached: viewAttached, }; return vm; function viewAttached(view) {
define([], function (require) {
var script = require('jquery.ptTimeSelect');
var app = require('durandal/app');
var vm = {
viewAttached: viewAttached,
};
return vm;
function viewAttached(view) {
$(view).find('#sample1').ptTimeSelect();
//$('#sample1').ptTimeSelect();
console.log("activated schedule module");
return true;
}
});
<section>
<p>
<label>Start</label><br />
<input id="sample1" class="ui-widget-content" name="s1Time2" value="" />
</p>
</section>
开始
我正在使用下面链接中的timepicker我不知道您的脚本是什么样子的，但我不确定它是否能够在您加载它的方式（作为AMD模块）中正确执行。如果您想继续这样做，我将使用ptTimeSelect.js脚本并将其与其他jQuery脚本一起全局加载 但是在Durandal应用程序中，通常最好避免直接从视图模型中操作DOM。最好的方法是创建一个定制的ko绑定处理程序，并在绑定内部执行DOM操作。这样，您就不必担心时间问题，并且视图模型与直接的UI操作保持隔离 谢天谢地，这并不像听起来那么难。史蒂夫·桑德森（Steve Sanderson）制作了一个简单的ko装订，您可以在开箱即用。看看这个要点： 上面的链接引用了一个现场的JSFIDLE演示。本演示不使用Durandal，但相关的淘汰概念是相同的
这里有一些关于自定义绑定的好的一般信息：我不知道您的脚本是什么样子的，但我不确定它是否能够以您加载它（作为AMD模块）的方式正确执行。如果您想继续这样做，我将使用ptTimeSelect.js脚本并将其与其他jQuery脚本一起全局加载 但是在Durandal应用程序中，通常最好避免直接从视图模型中操作DOM。最好的方法是创建一个定制的ko绑定处理程序，并在绑定内部执行DOM操作。这样，您就不必担心时间问题，并且视图模型与直接的UI操作保持隔离 谢天谢地，这并不像听起来那么难。史蒂夫·桑德森（Steve Sanderson）制作了一个简单的ko装订，您可以在开箱即用。看看这个要点： 上面的链接引用了一个现场的JSFIDLE演示。本演示不使用Durandal，但相关的淘汰概念是相同的
这里有一些关于自定义绑定的好信息：要使用solid timepicker控件和durandal快速启动并运行，您可以按照以下步骤操作 按以下顺序将这些脚本添加到页面中。在加载require/durandal之前，将它们添加为标准标记
<head>
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.10.0.js"></script>
<script src="/Scripts/jquery.ui.timepicker.js"></script>
<script src="/Scripts/knockout-jquery-ui-widget.js"></script>
<script type="text/javascript" src="/App/durandal/amd/require.js" data-main="/App/main"></script>
</head>
<input type="text" placeholder="Choose Time" data-bind="jqueryui: { widget: 'timepicker', options: { showPeriod: true }}">
要使用可靠的计时器控件和durandal快速启动和运行，您可以按照以下步骤操作 按以下顺序将这些脚本添加到页面中。在加载require/durandal之前，将它们添加为标准标记
<head>
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.10.0.js"></script>
<script src="/Scripts/jquery.ui.timepicker.js"></script>
<script src="/Scripts/knockout-jquery-ui-widget.js"></script>
<script type="text/javascript" src="/App/durandal/amd/require.js" data-main="/App/main"></script>
</head>
<input type="text" placeholder="Choose Time" data-bind="jqueryui: { widget: 'timepicker', options: { showPeriod: true }}">