1

我对杜兰达尔很陌生。我尝试将时间选择器添加到项目中，如下所示。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

4

2 回答 2

1

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

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

  1. jQuery http://jquery.com/
  2. jQueryUI http://jqueryui.com/
  3. 这个 timepicker 控件（基于 jquery ui）http://fgelinas.com/code/timepicker/
  4. heiserman 提到的 Steve Saunderson 的 jQueryUI Knockout 绑定。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 }}">
于 2013-04-01T19:32:58.250 回答
0

我不确切知道您的脚本是什么样的，但我不确定它是否能够以您加载它的方式正确执行（作为 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

于 2013-04-01T12:12:32.710 回答