如何使用ko.computed（Knockout.js）纠正绑定属性

Question

I use Knockout.js and I face with this problem. The problem is property "newString" view incorrect data on page: "no image". I want to see another string: "image1". Help me to fix this problem.

 var viewModel = { new_property_first: ko.observable('image1'), new_property_second: ko.observable('image2'), newString: ko.computed(function() { if (this.new_property_first == 'image1') { return 'image1'; } else if (this.new_property_second == 'image2') { return 'image2'; } else { return 'no_image'; } }, this), }; ko.applyBindings(viewModel); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <p data-bind="text: newString"></p> 

Answer 1

The first problem here is that you can't use this on object literals, you have to use function declaration . Also, you can't access observable values directly, you have to "call" them like this :

 function ViewModel() { this.new_property_first = ko.observable('image1'); this.new_property_second = ko.observable('image2'); this.newString = ko.computed(function() { if (this.new_property_first() == 'image1') { return 'image1'; } else if (this.new_property_second() == 'image2') { return 'image2'; } else { return 'no_image'; } }, this); } ko.applyBindings(new ViewModel()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <p data-bind="text: newString"></p> 

Otherwise, if you want to stay with object literal, you can declare your computed outside the object declaration :

 var viewModel = { new_property_first: ko.observable('image1'), new_property_second: ko.observable('image2') } viewModel.newString = ko.computed(function() { if (this.new_property_first() == 'image1') { return 'image1'; } else if (this.new_property_second() == 'image2') { return 'image2'; } else { return 'no_image'; } }, viewModel) ko.applyBindings(viewModel); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <p data-bind="text: newString"></p>