1

我最近使用 Knockout 和 JQuery 将我公司的项目移植到了 Durandal。直截了当地说：我需要使用两个 HTML 输入来初始化 JQuery UI 的日期选择器。但是，当我这样做时，JQuery 无法找到输入：

看法：

<div data-bind="if: !CurrentUser()">
    <h1 data-bind="html: DisplayName"></h1>

    <div data-bind="compose: 'users/_UsersList.html'"></div>
</div>

<div data-bind="with: CurrentUser(), visible: CurrentUser()">
    <h1>User detail</h1>

    <div data-bind="compose: 'users/_UserDetail.html'"></div>
</div>

viewmodel - 在第一个 div 中选择用户时调用 SelectUser() 函数，然后加载第二个 div 和 users/_UserDetail.html：

users.SelectUser = function (user) {
    users.CurrentUser(user);

    /* ... */

    $(function () {
        $("#datepickerFrom").datetimepicker({
            dateFormat: "d. m. yy",
            timeFormat: "HH:mm:ss",
            defaultDate: null
        });

        $("#datepickerTo").datetimepicker({
            dateFormat: "d. m. yy",
            timeFormat: "HH:mm:ss"
        });
    });
}

_UserDetail.html 的重要部分

<div class="control-group">
    <label class="control-label">Active from</label>
    <div class="controls">
        <input type="text" data-bind="value: ActiveFrom" id="datepickerFrom" />
    </div>
</div>
<div class="control-group">
    <label class="control-label">Active to</label>
    <div class="controls">
        <input type="text" data-bind="value: ActiveTo" id="datepickerTo" />
    </div>
</div>

然后两个 HTML 输入未定义。如果我div将compose绑定更改为实际的 users/_UserDetail.html 内容，它工作得很好，但是视图很快就会变得一团糟——html文件并不小。如果有人能指出我正确的方向，我将不胜感激。谢谢！

4

2 回答 2

4

在这种情况下，您需要一个 Knockout Binding Handler。

在某些情况下，绑定处理程序可能会遇到组合生命周期的问题，如果是这种情况并且您使用的是 Durandal 2，则可以使用方法composition.addBindingHandler。否则只需使用ko.bindingHandlers.

您将需要在shell.jsor中创建绑定，main.js以便它们在所有应用程序中都可用。使用以下代码：

 var composition = require('durandal/composition');
 composition.addBindingHandler('datetimepicker', {
            init: function (element, valueAccessor) {
                var activeTo =  valueAccessor();  //What do you want to do with this value?
                $(element).datetimepicker({
                   dateFormat: "d. m. yy",
                   timeFormat: "HH:mm:ss",
                   defaultDate: null   //Maybe use activeTo here?
                  });
            }
         });

在您的用户界面中：

 <input type="text" data-bind="datetimepicker: ActiveTo" id="datepickerTo" />

笔记：

此代码可能不起作用，但您绝对应该使用这种方法来创建这种控件并使用 Durandal 的组合生命周期。

于 2013-09-09T15:51:41.363 回答
1

很确定问题出在这个：

users.SelectUser = function (user) {
    servers.CurrentUser(user);

    /* ... */

    $(function () {
        $("#datepickerFrom").datetimepicker({
            dateFormat: "d. m. yy",
            timeFormat: "HH:mm:ss",
            defaultDate: null
        });

        $("#datepickerTo").datetimepicker({
            dateFormat: "d. m. yy",
            timeFormat: "HH:mm:ss"
        });
    });
}

你在一个函数中有你的 jQuery datepicker 初始化代码。这意味着它只会在SelectUser函数被调用时运行。尝试将其移到任何功能之外。

于 2013-09-09T15:16:49.893 回答