Question

我对淘汰的可见绑定感到有些困惑。我创建了一个示例来演示问题。主要目标是在用户选择“其他”选项时显示一些div（otherDetails）。它不起作用。当“mySelection”字段发生变化时，可见不会被重新评估。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Test</title> 

    <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script> 
    <script src="Scripts/knockout-2.2.0.js" type="text/javascript"></script> 

    <script type="text/javascript"> 

    function data() 
    { 
            this.mySelection =  ko.observable('other'); 

            this.isOtherSelected = ko.computed(function () 
            { 
                    return this.mySelection.peek() == 'other'; 
            }, this); 
    } 

    var myData = new data(); 

    $(document).ready(function () 
    { 
             $('#selections').change(function () 
             { 
                 myData.mySelection = $(this).val();         
             }); 

            dataBind(); 
    }); 

    function dataBind() 
    { 
            ko.applyBindings(myData); 
    } 
    </script> 
</head> 

<body> 
        <div> 
                <select id="selections" data-bind="value: mySelection"> 
                    <option value='one'>One</option> 
                    <option value='two'>Two</option> 
                    <option value='three'>Three</option> 
                    <option value='other'>Other</option> 
                </select> 
        </div> 
        <div id="otherDetails" data-bind="visible: isOtherSelected"> 
            <span>Some controls and stuff...</span> 
        </div> 
</body>

先谢谢你，Yaron。

Answer 1

只需删除peek()：
return this.mySelection() == 'other';

peek函数获取observable的值，但不会在更改时订阅外部计算的observable。因此，您的绑定不会被重新评估。

Answer 2

您应该以不同的方式使用可观察对象。每个observable都是一个函数，所以要获得你必须称之为的值：

return this.mySelection() == 'other';

如果要为其赋值，则应将值传递给此函数：

myData.mySelection($(this).val());

这是工作小提琴：http://jsfiddle.net/kkGRs/

P.S。您不需要在那里使用jQuery更改处理程序。 KO将自动更新observable的值。以下是重构代码：http://jsfiddle.net/kkGRs/1/

敲除可见绑定未被重新评估

2 个答案: