0

我正在努力理解 Knockout。在开发过程中，我遇到了一个名为 total 的场景中的计算变量问题。尽管从 UI 绑定到总变量，但它似乎没有在我的 UI 界面中更新。它还具有隐藏绑定总控件后面的其他控件的效果，在这种情况下，我的选择下拉菜单被隐藏了。请问我是不是做错了什么。这是我的 Javascript

<head><title>Hello Knockout</title></head>
<body>

    <p>
        <input type="text" data-bind="value : Listprice , valueUpdate : 'afterkeydown'" />
        <span data-bind="text : formatCurrency(Listprice)"></span>  
     <span data-bind= "text : total"/> 


     <select data-bind="options : color  , optionsText : 'name' , value:selectedColor,  optionsCaption : 'Choose item..'" />
        <span data-bind="text : selectedColor" />


    <script type="text/javascript" src="Scripts/knockout-2.1.0.debug.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" >

        var data = {
            "Id": 1001,
            "SalePrice": 1649.01,
            "ListPrice": 2199.00,
            "ShortDesc": "Taylor 314CE",
            "Description": "Taylor 314-CE Left-Handed Grand Auditorium Acoustic-Electric Guitar"

        };
        $(function () {
            var Colored = function (id, name) {
                this.id = ko.observable(id),
            this.name = ko.observable(name)
            };

            var vm = {
                id: ko.observable(data.Id),
                saleprice: ko.observable(data.SalePrice),
                Listprice: ko.observable(data.ListPrice),
                ShortDesc: ko.observable(data.Description),
                color: ko.observableArray([
                new Colored(1, "Black"),
                new Colored(2, "Red"),
                new Colored(3, "Blue")

                ]),
                selectedColor: ko.observable(),
                quantity: ko.observable(2)

            };

            vm.total = ko.computed(function () {
                return this.Listprice,10 ?  this.ListPrice: 0;
            }, vm);


            vm.formatCurrency = function (value) {
                return "$" + value();
            };


            ko.applyBindings(vm);

        });
    </script>
</body>

4

1 回答 1

2

确保您始终像这样格式化您的跨度：

<span data-bind="text: total"></span>

而不是

<span data-bind= "text : total"/>

编辑：

AlsoListprice是一个 observable，它是一个函数。如果要获取当前值，请确保使用 () 调用它：

return this.Listprice() ?  this.Listprice(): 0;

这是一个你可以玩的小提琴：http: //jsfiddle.net/jearles/vDmP2/

于 2012-09-16T12:06:06.270 回答