0

当使用jquery-ui 自定义绑定将日期选择器添加到文本字段时，它只会在我不使用模板时更新我的​​模型。

简单的 JSFiddle 问题演示

HTML：

<script type="text/html" id="datepicker-template">
        <span data-bind="text: $data"></span>
        <input type="text" data-bind="jqueryui: {widget:'datepicker'}, value: $data">
</script>

<h2>Witout templates</h2>
<div>
    <span data-bind="text: from"></span>
    <input type="text" data-bind="jqueryui: {widget:'datepicker'}, value: from">
    <span data-bind="text: to"></span>
    <input type="text" data-bind="jqueryui: {widget:'datepicker'}, value: to">
</div>
<h2>With template<h2>
<div data-bind="template: {name:'datepicker-template', foreach: dates}"></div>

JavaScript：

$(function(){
    var ViewModel = function(){
        this.from = ko.observable("from");
        this.to = ko.observable("to");
        this.dates = ko.observableArray([this.from, this.to]);
    };

    var viewModel = new ViewModel();               
    ko.applyBindings(viewModel);
});​

感觉好像我错过了一些非常简单的东西。

4

1 回答 1

0

实际上，在没有 jQueryUI 绑定的简单示例中，该问题是可以重现的。问题与$data淘汰模板中的关键字有关。

显然$data不能用于模板内的双向绑定。有关一些评论，请参阅此 Google Groups 线程：

如果你有项目： ["one", "two", "three"] 甚至 [ko.observable("one"), ko.observable("two"), ko.observable("three")] 在一个foreach $data 将是原始值，此时 KO 无法知道如何写回它。您需要使用具有属性的对象，以防您需要对值进行读/写访问。

因此，解决此限制的一种方法是为您的日期对象创建一个简单的 ViewModel：

var DateViewModel = function (initialValue) {
    this.value = ko.observable(initialValue);
};

然后在您的主 ViewModel 中，您可以编写：

var ViewModel = function() {
    this.dates = ko.observableArray([
        new DateViewModel("from"),
        new DateViewModel("to")
    ]);
};

你的模板最终会是这样的：

<script type="text/html" id="datepicker-template">
    <span data-bind="text: value"></span>
    <input type="text" data-bind="value: value">
</script>

示例：http: //jsfiddle.net/RjEnh/

于 2012-05-28T13:53:22.260 回答