Templates Knockout.js模板未更新依赖对象的UI绑定

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

我有一个淘汰模板，它使用 可以观察到

只有在绑定 选择元素的值 有效期。如果这不受约束 用户界面按预期更新

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

可观察对象称为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>

非模板
有效期：


开始：


完:


间隔类型：
移位
休息（付费）
休息（未付）


改变了：
模板
有效期：


开始：


完:


间隔类型：
移位
休息（付费）
休息（未付）


改变了：
函数区间模型（数据）{
var_this=这个；
_this.IntervalID=ko.可观察（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.可观察（data.End）；
_this.OriginalIntervalTypeID=ko.observable（data.IntervalTypeID）；
_this.HasChanged=ko.DependentToServable（函数（）{
return！（\u this.OriginalStart（）==\u this.Start（））&
_this.OriginalEnd（）==\u this.End（）&
_this.OriginalIntervalTypeID（）==_this.IntervalTypeID（））；
});
}
var模型；
$（函数（）{
var viewModel={}；
viewModel=新IntervalModel（{IntervalID:1，开始：“09:00”，结束：“10:00”，IntervalTypeID:2}）；
应用绑定（视图模型）；
});

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

---

谢谢

在github上记录了一个问题：

问题的中心是使用数字作为选择选项的值。当select元素使用

值

绑定时，它将使用元素的实际值（始终是字符串）进行更新。因此，如果您的可观测值为2，那么在设置绑定时，它将被设置为“2”。此更改似乎会导致使用select元素之前在模板中设置的可观察对象的任何绑定出现问题

因此，在这可能被修复之前，您可以通过将IntervalTypeID作为字符串（“2”）传递来使其工作。将数字转换为字符串的简单方法是执行

yourvalue+'

这就是它的工作原理：