Simplified code below. I have another build w/ajax calls that I know are working b/c I can see them hit the server. But I cannot get the stuff to render the changes back to the UI.

.html:

<div id="LoginPage" data-title="LoginPage" data-role="page" data-theme="a">
<div data-role="content" class="minimalPaddingContent">
    <div class="divDivider"></div>
    <h3>REACH Energy Audit Login</h3>

    <input type="text" placeholder="User Name" id="userName" data-bind="value: successOrFailureSw"/>
    <input type="password" placeholder="Password"  id="password"/>

    <a href="#" data-role="button" id="LoginSubmit" style="width:150px;" class="centeredButton" data-bind="click: changeValue">Sign In</a>
  <span data-bind="text: successOrFailureSw"></span>

</div>

.js:

var LoginViewModel = function (monName, successOrFailureSw) {
    var self = this;

    selfmonName = ko.observable(monName);
    self.successOrFailureSw = ko.observable(successOrFailureSw);



    self.changeValue = function(){
        console.log("changed!");
        self.successOrFailureSw = "new value!";
    }

};

ko.applyBindings(new LoginViewModel("", "super fail"));

I am pretty sure my mappings are correct on the .html b/c the original value will render as super fail, and if I change the value in the text box that maps to "successOrFailureSw", I get the updated value in the span tag, but I cannot get a change of effect at click time for the login button.

I know that I am missing something so simple, so I apologize in advance.

Thanks!

brian

Simplified code below. I have another build w/ajax calls that I know are working b/c I can see them hit the server. But I cannot get the stuff to render the changes back to the UI.

.html:

<div id="LoginPage" data-title="LoginPage" data-role="page" data-theme="a">
<div data-role="content" class="minimalPaddingContent">
    <div class="divDivider"></div>
    <h3>REACH Energy Audit Login</h3>

    <input type="text" placeholder="User Name" id="userName" data-bind="value: successOrFailureSw"/>
    <input type="password" placeholder="Password"  id="password"/>

    <a href="#" data-role="button" id="LoginSubmit" style="width:150px;" class="centeredButton" data-bind="click: changeValue">Sign In</a>
  <span data-bind="text: successOrFailureSw"></span>

</div>

.js:

var LoginViewModel = function (monName, successOrFailureSw) {
    var self = this;

    self.monName = ko.observable(monName);
    self.successOrFailureSw = ko.observable(successOrFailureSw);



    self.changeValue = function(){
        console.log("changed!");
        self.successOrFailureSw = "new value!";
    }

};

ko.applyBindings(new LoginViewModel("", "super fail"));

I am pretty sure my mappings are correct on the .html b/c the original value will render as super fail, and if I change the value in the text box that maps to "successOrFailureSw", I get the updated value in the span tag, but I cannot get a change of effect at click time for the login button.

I know that I am missing something so simple, so I apologize in advance.

Thanks!

brian

• javascript
• knockout.js

3 Answers 3

You assign value to the observable in wrong way. Each obserbable is a function so you should call it using () modify your changeValue function to the following:

self.changeValue = function(){
    console.log("changed!");
    self.successOrFailureSw("new value!");
}

You should set the value like this:

self.successOrFailureSw('new value!');

successOrFailureSw is not a string. That's why you need to set it in the same fashion that you did earlier in your code.

Try this : self.successOrFailureSw("new value!")