JS html knockout binds returning weird code instead of html string

Question

function tournamentViewModel(){ var self= this; self.name = ko.observable(); self.districts = ko.observableArray([new district('Provo',1),new district('Salt Lake City',2),new district('St. George',3)]); self.district = ko.observableArray(); self.regions = ko.observableArray([new region('Utah',1),new region('Idaho',2)]); self.region = ko.observableArray(); self.location = ko.observable(); self.date = ko.observable(); self.startTime = ko.observable(); self.image = ko.observable(); self.flyer = ko.computed(function(){return '<h1>'+self.name+'</h1>'+self.image},self); self.clearImage = function(){ self.image(''); } self.tournamentID = ko.computed(function(){return 't_'+self.district+'_'+self.region+'_'+self.date}, self); }; 

The above knockout.js view model seems fine, except when I want to associate something with a computed observable flyer . Instead, all I see is the following text:

 <h1>function c(){if(0<arguments.length){if(!c.equalityComparer||!c.equalityComparer(d,arguments[0]))cI(),d=arguments[0],cH();return this}aULa(c);return d}</h1>function c(){if(0<arguments.length){if(!c.equalityComparer||!c.equalityComparer(d,arguments[0]))cI(),d=arguments[0],cH();return this}aULa(c);return d} 

I do not know what is going on here. The following is the binding I am referring to. I tried both html and text bindings.

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

The BTW computed observable tournamentID works fine, and the syntax seems identical. I think the problem arises when I use self.name in the computed observable. Any ideas?

Answer 1

Think about it. What are you getting? You get a function definition. Because you passed the function to your computed . And you need to pass the values . You should use:

 self.flyer = ko.computed(function(){ return '<h1>'+self.name()+'</h1>'+self.image(); }); 

since both name and image are observable (in terms of JavaScript: functions).

I'm not sure why tournamentID works for you. It should not be.

BTW If you use var self = this; , you can omit the second argument computed .

Answer 2

try it

 <span data-bind="text: flyer()"></span>