CODEWITHSUNDEEP
knockout.jsknockout-2.0
David Barel
David Barel

Reputation: 285

Visible binding - knockout JS

I am trying to control the visibility of an element (the yellow box in the fiddle code below) using 3 images with click events. It is not working.

I defined the following visibility properties

    IsSelectionPoll = ko.observable(true);
    IsBoolPoll = ko.observable();
    IsRatePoll = ko.observable();

Here is the click event:

SetTypeId = function (typeId) {
  //selectPollType = typeId;
  $('<p/>').text(typeId).appendTo('body');
  IsSelectionPoll = (typeId == '1');
  console.log(typeId);
  IsBoolPoll = (typeId == '3');
  IsRatePoll = (typeId == '2');
 }

I tried using the SELF and the this and many other tricks but I can't figure out why it is not working.

Please view the code here: http://jsfiddle.net/goldenrate/NfDyX/

thanks, David

Upvotes: 0

Views: 164

Answers (1)

Grim
Grim

Reputation: 1648

You aren't creating any view model in there - change the function declaration to:

function PollWizardViewModel(initialData){

and then the binding line to:

 ko.applyBindings(new PollWizardViewModel());

The click binding itself should work as it is once that is done.

Edit: also, do not reassign your observables, but simply change their values, otherwise the binding with the dom is lost (since the link is with the old observables that are discared when you reassign their reference) - e.g. instead of:

this.IsSelectionPoll = (typeId == '1');

use:

this.IsSelectionPoll(typeId == '1');

Upvotes: 1

Related Questions