Knockout.js模板不更新UI上dependantObservable结合 [英] Knockout.js Template not updating UI binding on a dependantObservable

问题描述

该应用程序是在VS2010使用ASP.NET MVC 3写入。

The application is written using ASP.NET MVC 3 in vs2010.

我有使用更新一些CSS和可见绑定淘汰赛模板
dependantObservable。

I have a knockout template that updates some css and visible bindings using a dependantObservable.

在我绑定只发生问题
  选择元素的值
  IntervalID。如果不这样结合的
  如预期的UI被更新。

The issue ONLY occurs when I bind the value of the select element to the IntervalID. If this is not bound the UI is updated as expected.

我从我的主要应用程序撕开了code并创建使用标准的标记，做同样的约束力一个示例页面，也模板。

I have ripped the code out from my main app and created a sample page that does the same binding using standard markup and also templates.

该dependantObservable称为HasChanged。

The dependantObservable is called 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>

任何帮助将是非常美联社preciated ...我需要为我有很多这些间隔的需要显示的使用模板。

Any help would be much appreciated... I need to use templates as i have lots of these intervals that need to be displayed.

谢谢！

推荐答案

有记录的是github上为这一个在这里的一个问题：的 https://github.com/SteveSanderson/knockout/issues/133

There is an issue logged on github for this one here: https://github.com/SteveSanderson/knockout/issues/133

问题主要围绕使用一个选择选项的值数。当选择元素使用值的结合，它与元素，这始终是一个字符串的实际值进行更新。所以，如果你观察到的是2，它被设置为2设置了绑定时。这一变化似乎会导致一个问题与使用可观察到的是在之前选择元素的模板设置任何绑定。

The issue centers around using numbers for the value of a select option. When a select element uses the value binding, it is updated with the actual value of the element, which is always a string. So, if your observable is 2, it gets set to "2" when the binding is set up. This change seems to cause an issue with any bindings that use that observable that were set up in the template prior to the select element.

所以，直到这可能固定的，你可以把它通过传递IntervalTypeID作为字符串（2）工作。一个简单的方法将数字转换为字符串是做 yourvalue +''。

So, until this is potentially fixed, you can make it work by passing IntervalTypeID as a string ("2"). An easy way to convert a number to string is to do yourvalue + ''.

这是工作：
http://jsfiddle.net/rniemeyer/uDSFa/

这篇关于Knockout.js模板不更新UI上dependantObservable结合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！