DatePicker 没有绑​​定到文本框？提供小提琴

Question

好吧，在其他情况下，我会将 datepicker 绑定到我的文本框，这将是直截了当的，但在这种情况下不是。

小提琴链接： http://jsfiddle.net/JL26Z/1/ .. 虽然我尝试设置完美的 seanrio，但无法将 datepicker 绑定到文本框。除了一切就绪

我的代码：

**<script id="Customisation" type="text/html">** // here i need to have text/html 



               <table style="width:1100px;height:40px;" align="center" >

                     <tr>

                    <input style="width:125px;height:auto;" class="txtBoxEffectiveDate" type="text" id="txtEffective" data-bind="" /> 
</tr>
    </script>

上面的代码用于我在每次单击按钮时动态生成相同的东西。所以上面的东西是模板之类的东西。

我的淘汰码：

    <div data-bind="template:{name:'Customisation', foreach:CustomisationList},visible:isVisible"></div>

<button data-bind="click:$root.CustomisatioAdd" >add </button>

我尝试了同样的旧方法将它与 datepicker 绑定

$('#txtEffective').datepicker();  // in document.ready i placed 

实际上，为了测试这一点，我创建了一个带有一些 id 带有 text/html 的外部脚本的文本框，并将 datepicker 绑定到它，它工作正常，遗憾的是它不适用于 text/html 内的文本框，我想不惜一切代价工作。

PS：我还没有发布我的视图模型，因为在这个基于问题的 senario 中不需要它

用Js添加的视图模型

var paymentsModel = function ()
{
            function Customisation()
            {
                var self = this;
            }

            var self = this;
            self.isVisible = ko.observable(false);
            self.CustomisationList = ko.observableArray([new Customisation()]);
            self.CustomisationRemove = function () {
                self.CustomisationList.remove(this);
            };
            self.CustomisatioAdd = function () {
                if (self.isVisible() === false)
                {
                    self.isVisible(true);
                }
                else
                {
                    self.CustomisationList.push(new Customisation());
                }
            };
}

    $(document).ready(function()
    {

        $('#txtEffective').datepicker();

        ko.applyBindings(new paymentsModel());

    });

感谢任何可能的解决方法

问候

Answer 1

我发现最好的方法是创建一个简单的 bindingHandler。

这是改编自我本地的代码，您可能需要对其进行调整...

** code removed, see below **

然后更新您的模板：

** code removed, see below **

通过使用 bindingHandler，您以后不需要尝试连接它，它是在数据绑定时通过敲除完成的。

希望这有帮助。

编辑

我创建了一个小提琴，因为我确实需要对日期选择器绑定进行大量调整。这是Fiddle 的链接，这是带有一些注释的代码。首先是 HTML：

<form id="employeeForm" name="employeeForm" method="POST">
    <script id="PhoneTemplate" type="text/html">
        <div>
            <span>
                <label>Country Code:</label>
                <input type="text" data-bind="value: countryCode"  />
            </span>
            <span><br/>
                <label>Date:</label>
                <input type="text" data-bind="datepicker: date"  />
            </span>
            <span>
                <label>Phone Number:</label>
                <input type="text" data-bind="value: phoneNumber" />
            </span>
            <input type="button" value="Remove" data-bind="click: $parent.remove" />
        </div>
    </script>
    <div>
        <h2>Employee Phone Number</h2>
        <div data-bind="template:{name:'PhoneTemplate', foreach:PhoneList}">
        </div>
        <div>
            <input type="button" value="Add Another" data-bind="click: add" />
        </div>
    </div>
</form>

注意我从您的模板中删除了 id=...；因为您的模板重复每个电话号码，并且 id 必须是唯一的才有意义。此外，我从国家代码和电话号码元素中删除了 datepicker: 绑定，并将其仅添加到日期字段中。此外 - 语法更改为“datepicker:”。如果您需要指定日期选择器选项，您可以这样做：

<input type="text" data-bind="datepicker: myObservable, datepickerOptions: { optionName: optionValue }" />

optionName 和 optionValue 来自 datepicker 的 jQueryUI 文档。

现在是代码和一些注释：

// Adapted from this answer:
// https://stackoverflow.com/a/6613255/1634810
ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options    = allBindingsAccessor().datepickerOptions || {},
            observable = valueAccessor(),
            $el        = $(element);

        // Adapted from this answer:
        // https://stackoverflow.com/a/8147201/1634810
        options.onSelect = function () {
            if (ko.isObservable(observable)) {
                observable($el.datepicker('getDate'));
            }
        };

        $el.datepicker(options);

        // set the initial value
        var value = ko.unwrap(valueAccessor());
        if (value) {
            $el.datepicker("setDate", value);
        }

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $el.datepicker("destroy");
        });
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element);

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') === 0) {
            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
        }

        var current = $el.datepicker("getDate");

        if (value - current !== 0) {
            $el.datepicker("setDate", value);
        }
    }
};

function Phone() {
    var self = this;

    self.countryCode = ko.observable('');
    self.date        = ko.observable('');
    self.phoneNumber = ko.observable('');
}  

function PhoneViewModel() {
    var self = this;
    self.PhoneList = ko.observableArray([new Phone()]);
    self.remove = function () {
        self.PhoneList.remove(this);
    };
    self.add = function () {
        self.PhoneList.push(new Phone());
    };
}

var phoneModel = new PhoneViewModel();

ko.applyBindings(phoneModel);

注意非常更新的绑定处理程序，它改编自 this answer 用于绑定，this answer 用于处理 onSelect。

我还在您的Phone() 对象中包含countryCode、date 和phoneNumber 可观察对象，并将您的模型转换为全局变量phoneModel。在调试器窗口（Chrome 中的 F12）中，您可以键入如下内容：

phoneModel.PhoneList()[0].date()

这将显示日期的当前值。

我注意到您的 form 已设置为在某处发帖。我建议您将 click 处理程序添加到“提交”按钮并使用 ajax 从您的 phoneModel 发布值。

希望此编辑对您有所帮助。

Answer 2

动态实体需要在创建后应用日期选择器。为此，我会在以下位置使用点击功能

HTML

<!-- Note the id added here -->
<button data-bind="click:$root.CustomisatioAdd" id="addForm" >add </button>


<script>
    $(document).on('click', '#addForm', function(){
        $('[id$="txtEffective"]').datepicker();
    }); 
</script>