Knockout JS html binding 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 to be fine except for when I want to bind something to the 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]))c.I(),d=arguments[0],c.H();return this}a.U.La(c);return d}</h1>function c(){if(0<arguments.length){if(!c.equalityComparer||!c.equalityComparer(d,arguments[0]))c.I(),d=arguments[0],c.H();return this}a.U.La(c);return d}

I don't know what's going on here. Below is the binding I'm applying it to. I've tried both html and text bindings.

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

BTW the computed observable tournamentID works great and the syntax seems identical. I think the problem occurs when I use self.name in the computed observable. Any ideas?

freakish · Accepted Answer · 2012-07-10 05:55:50Z

6

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

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

since both name and image are observables (from JavaScript point of view: functions).

I'm not sure why tournamentID is working for you. It shouldn't.

BTW If you are using var self = this;, then you can omit the second argument of computed.

edited Jul 10, 2012 at 5:55

answered Jul 10, 2012 at 5:50

freakish

57k12 gold badges141 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Frank B Over a year ago

Thanks for this answer. I always miss something stupid. Also thanks for explaining your answer instead of just offering fixed code. It means a lot more to have the theory then just the code.

Ricky · Accepted Answer · 2012-07-10 05:49:41Z

4

try this

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

answered Jul 10, 2012 at 5:49

Ricky

3731 silver badge8 bronze badges

Collectives™ on Stack Overflow

Knockout JS html binding returning weird code instead of html string

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related