2016-03-25 2 views
1

ユーザーが特定の状態を選択したときに税率を更新する方法を理解しようとしています。最初taxedItemsユーザーの選択に基づいて税金を更新する方法

<select data-bind="event: {change: checkTax }"> 
    <option value="PA">PA</option> 
    <option value="FL">FL</option> 
</select> 

<span data-bind="text: taxedItems"></span> 
var MainViewModel = function() { 
    var self = this; 
    var response = arrayFromJson; 
    // ... 

    self.checkTax = function (viewModel, event) { 
     if (event.target.value === "FL") { 
      userTax = "this should appear"; 
     } 
    }; 

    self.taxedItems = ko.pureComputed(function() { 
     taxcost = userTax; 
     return taxcost; 
    }); 

    self.CartItems($.map(response, function(item) { 
     return new AppViewModel(item); 
    })); 
}; 

function AppViewModel(data) { 
    var self = this; 
    // ... 
} 

ko.applyBindings(new MainViewModel()); 

は、ユーザーがFLに変更した後、その後、taxedItems"this should appear"を言う必要がありますが、それはそれだけでtaxedItemsの更新をバイパスしていない、nullにする必要があります:ここで(関連性のないデータを取り除いた)私のコードです全部。誰がなぜこれが分かっていますか?

+0

'?あなたのコード例を考えれば、 'taxedItems'の範囲外です。 –

答えて

1

あなたmainViewModelでtaxedItemsを持たせたい場合は、これを行うことができます:
VM:

var MainViewModel = function() { 
    var self = this; 
    self.CartItems = ko.observableArray([]); 
    self.States = ko.observableArray([{Value:"CA",Name:"CA"}, 
             {Value:"FL",Name:"FL"}, 
             {Value:"NY",Name:"NY"}, 
             {Value:"VG",Name:"VG"}, 
             {Value:"TX",Name:"TX"} 
            ]); 

    var response = [{ }]; 
    self.CartItems($.map(response, function (item) { 
     return new AppViewModel(item); 
    })); 


    self.TaxedItems = ko.observable(); 
    self.SelectedState = ko.observable(0); 

    self.SelectedState.subscribe(function (StateValue) { 
     if(StateValue ==='FL'){ 
      self.TaxedItems('this should appear'); 
     }else{ 
      self.TaxedItems(''); 
     } 
    }) 
    } 

    function AppViewModel(data) { 
    var self = this; 
    // ... 
} 

    ko.applyBindings(new MainViewModel()); 

ビュー:

<select data-bind="foreach: States ,value:SelectedState"> 
<option data-bind="visible:$index()==0" value="0" disabled>Select Tax State..</option> 
    <option data-bind="value: Value,text:Name"></option> 
</select> 
<br> 

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

例:あなたは `userTaxを定義しないhttp://jsfiddle.net/GSvnh/5095/

関連する問題