0

ノックアウトの理解に取り組んでいます。開発中に、合計と呼ばれるこのシナリオで計算された変数に問題がありました。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>

4

1 に答える 1

2

スパンは常に次のようにフォーマットしてください。

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

それよりも

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

編集：

またListprice、関数であるオブザーバブルです。現在の値を取得したい場合は、必ず () を使用して呼び出してください。

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

これは、あなたが遊ぶことができる実用的なフィドルです：http://jsfiddle.net/jearles/vDmP2/

于 2012-09-16T12:06:06.270 に答える