Kendo MVVM async background color binding

Question

I am trying to do something very simple and straight forward. I want to click a (class="AccentSquares") that I have made into colored squares. Each square's color corresponds to a different theme color. The bar at the top(class="MobileNewAccountHeader"), which is defaulted to "purple", should change to the color of the square that I am clicking. Here is what I have.

HTML

<div id="UserAccentColor">
<div class="MobileNewAccountHeader" style="margin-bottom: 0" data-bind="style: { backgroundColor: themecolor }">Accent Color</div>
<div class="HeaderBarWhite">
    <div class="Cancel" data-bind="click: cancel">Cancel</div>
    <div class="Save" data-bind="click: save">Save</div>
</div>
<div class="PasswordFont" style="padding: 10px;">
    Select from the six colors below to set your accounts theme color.
</div>
<div style="margin-top: 10px; width: 89.8%; margin-left: 5%">
    <div class="AccentSquares" data-bind="click: change1, style: { backgroundColor: color1 }"></div>
    <div class="AccentSquares" data-bind="click: change2,  style: { backgroundColor: color2 }"></div>
    <div class="AccentSquares" data-bind="click: change3,  style: { backgroundColor: color3 }"></div>
    <div class="AccentSquares" data-bind="click: change4,  style: { backgroundColor: color4 }"></div>
    <div class="AccentSquares" data-bind="click: change5,  style: { backgroundColor: color5 }"></div>
    <div class="AccentSquares" data-bind="click: change6,  style: { backgroundColor: color6 }"></div>
</div>

Jquery

var newaccountcolorvm = kendo.observable({
themecolor: "purple",
color1: "purple",
color2: "greenyellow",
color3: "green",
color4: "yellow",
color5: "pink",
color6: "orange",
chang1: function () {
    this.set("themecolor", "purple");

},
chang2: function () {
    this.set("themecolor", color2);

},
chang3: function () {
    this.set("themecolor", "green");
},
chang4: function () {
    this.set("themecolor", "yellow");

},
chang5: function () {
    this.set("themecolor", "pink");

},
chang6: function () {
    this.set("themecolor", "orange");

},
cancel: function () {
    pageNav("#FirstTimeUserSettings");
},
save: function () {
    pageNav("#FirstTimeUserSettings");
}

});

Answer 1

Your click bindings on your div's are bound to change1, change2, change3..., but in your viewmodel, the function names are chang1, chang2, chang3...

Fix that so they match, and it should work.

http://jsbin.com/vetem/1/edit