Knockout.js 模板未更新 dependentObservable 上的 UI 绑定

该应用程序是在 vs2010 中使用 ASP.NET MVC 3 编写的。

我有一个淘汰赛模板，它使用 a 更新一些 css 和可见绑定 依赖的可观察的。

仅当我绑定时才会出现此问题 选择元素的值 间隔ID。如果这没有被绑定 UI 按预期更新。

我已经从主应用程序中删除了代码，并创建了一个示例页面，该页面使用标准标记和模板执行相同的绑定。

依赖的Observable 称为HasChanged。

 <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-1.2.0.js" type="text/javascript"></script>

<div data-bind="template: { name: 'intervalTemplate', for:viewModel }">
</div>
<h2>
    Not Template</h2>
<div data-bind="style: { color: HasChanged() ? 'red' : 'black' }">
    IntervalID: <span data-bind="text: IntervalID"></span>
    <br />
    Start:
    <input type="text" data-bind="value: Start">
    <br />
    End:
    <input type="text" data-bind="value: End">
    <br />
    Interval Type:
    <select data-bind="value: IntervalTypeID">
        <option value="1">Shift</option>
        <option value="2">Break (Paid)</option>
        <option value="3">Break (Unpaid)</option>
    </select><br />
    HasChanged: <span data-bind="text: HasChanged"></span>
</div>

<script id="intervalTemplate" type="text/html">
    <div data-bind="style: { color: HasChanged() ? 'red' : 'black' }">
    <h2>Template</h2>
IntervalID: <span data-bind="text: IntervalID"></span>
<br />
Start:
<input type="text" data-bind="value: Start">
<br />
End:
<input type="text" data-bind="value: End">
<br />
Interval Type:
<select data-bind="value: IntervalTypeID">
    <option value="1">Shift</option>
    <option value="2">Break (Paid)</option>
    <option value="3">Break (Unpaid)</option>
</select><br />
HasChanged: <span data-bind="text: HasChanged"></span>
</div>
</script>

<script type="text/javascript">
    function IntervalModel(data) {
        var _this = this;

        _this.IntervalID = ko.observable(data.IntervalID);
        _this.Start = ko.observable(data.Start);
        _this.End = ko.observable(data.End);
        _this.IntervalTypeID = ko.observable(data.IntervalTypeID);

        _this.OriginalStart = ko.observable(data.Start);
        _this.OriginalEnd = ko.observable(data.End);
        _this.OriginalIntervalTypeID = ko.observable(data.IntervalTypeID);


        _this.HasChanged = ko.dependentObservable(function () {
            return !(_this.OriginalStart() == _this.Start() &
                _this.OriginalEnd() == _this.End() &
                _this.OriginalIntervalTypeID() == _this.IntervalTypeID());
        });

    }

    var viewModel;

    $(function () {

        var viewModel = {};

        viewModel = new IntervalModel({ IntervalID: 1, Start: "09:00", End: "10:00", IntervalTypeID: 2 });
        ko.applyBindings(viewModel);

    });

</script>

任何帮助将不胜感激...我需要使用模板，因为我有很多需要显示的间隔。

Thanks!

github 上记录了一个关于此问题的问题：https://github.com/SteveSanderson/knockout/issues/133 https://github.com/SteveSanderson/knockout/issues/133

问题集中在使用数字作为选择选项的值。当选择元素使用value绑定时，它会使用元素的实际值进行更新，该元素始终是字符串。因此，如果您的可观察值是 2，则在设置绑定时它会设置为“2”。此更改似乎会导致使用在 select 元素之前在模板中设置的可观察值的任何绑定出现问题。

因此，在这个问题可能得到解决之前，您可以通过将 IntervalTypeID 作为字符串 (“2”) 传递来使其工作。将数字转换为字符串的一个简单方法是yourvalue + ''.

这里它正在工作：http://jsfiddle.net/rniemeyer/uDSFa/ http://jsfiddle.net/rniemeyer/uDSFa/