javascript - DatePicker 未绑定(bind)到文本框？提供 fiddle

Question

在其他情况下，我会将日期选择器绑定(bind)到我的文本框，这将是直接的，但在这种情况下不是。

fiddle 链接: http://jsfiddle.net/JL26Z/1/ ..在设置完美的 Seanrio 时，我尝试但无法将日期选择器绑定(bind)到文本框。除了一切都已就位

我的代码:

**<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>

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

我的 knockout 码:

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

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

我尝试用同样的旧方法将其与日期选择器绑定(bind)

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

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

PS:我还没有发布我的 View 模型，因为在这个基于问题的场景中不需要它

查看用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

我发现做到这一点的最好方法是创建一个简单的绑定(bind)处理程序。

这是根据我本地的代码改编的，您可能需要调整它......

** code removed, see below **

然后更新您的模板:

** code removed, see below **

通过使用绑定(bind)处理程序，您无需稍后尝试将其连接起来，它是通过在数据绑定(bind)时进行 knockout 来完成的。

希望这对您有所帮助。

编辑

我创建了一个 fiddle ，因为我确实需要对日期选择器绑定(bind)进行大量调整。这是 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: 从国家/地区代码和电话号码元素中绑定(bind)，并将其仅添加到日期字段。另外 - 语法更改为“datepicker:”。如果您需要指定日期选择器选项，您可以这样做:

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

其中 optionName 和 optionValue 来自日期选择器的 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);

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

我还在您的 Phone() 对象中包含了 countryCode、date 和 phoneNumber 可观察对象，并将将您的模型放入全局变量 phoneModel 中。从调试器窗口(Chrome 中的 F12)您可以输入如下内容:

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

这将显示日期的当前值。

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

希望此编辑有所帮助。