Question

我对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) {
    $(view).find('#sample1').ptTimeSelect();
    //$('#sample1').ptTimeSelect();

    console.log("activated schedule module");
    return true;
}
});

这里jquery.ptTimeSelect是时间选择器js文件。我真的需要在这里或其他地方添加jquery.ptTimeSelect.js。

schedule.html：

  <section>
    <p>
        <label>Start</label><br />
        <input id="sample1" class="ui-widget-content" name="s1Time2" value="" />
    </p>

</section>

我面临的问题我正在页面底部获得基本的时间选择器。我没有在哪里添加js和css文件到项目。请帮助我对此我很陌生。

我正在使用以下链接http://pttimeselect.sourceforge.net/example/index.html

中的时间戳

Answer 1

要使用坚固的时间选择器控件和durandal快速启动并运行，您可以按照以下步骤操作。

按照以下顺序将这些脚本添加到您的页面。在加载require / durandal之前将它们添加为标准标记。

jQuery http://jquery.com/
jQueryUI http://jqueryui.com/
此timepicker控件（基于jquery ui构建）http://fgelinas.com/code/timepicker/
史蒂夫桑德森的jQueryUI Knockout绑定是heiserman提到的。 https://github.com/SteveSanderson/knockout/wiki/Bindings---jqueryui-widgets

以下是您可以参考上述脚本的方法，这些脚本标签应该进入您的主布局页面，index.html或托管您的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>

然后你可以在你的durandal视图中创建一个时间戳，如下所示：

<input type="text" placeholder="Choose Time" data-bind="jqueryui: { widget: 'timepicker', options: { showPeriod: true }}">

Answer 2

我不知道你的脚本究竟是什么样的，但我不确定它是否能够正确地执行你加载它的方式（作为AMD模块）。如果你想继续这种方式，我会使用ptTimeSelect.js脚本并使用其他jQuery脚本全局加载它。

然而，在Durandal应用中，通常最好避免直接在视图模型中操作DOM。最好的方法是创建一个自定义的ko绑定处理程序并在绑定中执行DOM操作。这样您就不必担心计时问题，并且您的视图模型与直接UI操作保持隔离。

值得庆幸的是，这并不像听起来那么难。 Steve Sanderson整理了一个简单的ko绑定，你可以开箱即用。看看这个要点：https://github.com/SteveSanderson/knockout/wiki/Bindings---jqueryui-widgets

上面的链接引用了一个实时的jsfiddle演示。这个演示不使用Durandal，但相关的淘汰概念是相同的。

这里有一些关于自定义绑定的一般信息：http://knockoutjs.com/documentation/custom-bindings.html

在Durandal模板项目中使用TimePicker或Datepicker

2 个答案: