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 个答案: