綁定到Knockout中的對象時出錯

Question

我正在努力了解Knockout。 在開發過程中，我在這個場景中遇到了計算變量的問題，稱為total。 盡管綁定了UI中的total變量，但它似乎沒有在我的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>

Answer 1

確保始終格式化您的跨度，如下所示：

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

而不是

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

編輯：

Listprice也是一個可觀察的函數。 如果要獲取當前值，請確保使用（）調用它：

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

這是一個你可以玩的小提琴： http ： //jsfiddle.net/jearles/vDmP2/

綁定到Knockout中的對象時出錯

問題描述

1 個解決方案

解決方案1
2 已采納 2012-09-16 12:06:06

綁定到Knockout中的對象時出錯

問題描述

1 個解決方案

解決方案1 2 已采納 2012-09-16 12:06:06

解決方案1
2 已采納 2012-09-16 12:06:06