Question

Working on a little feedback form and I’m new at the Knockout/jQuery game so I’m sure this is a syntax error.

Goal / Background

• I have a feedback form, part of which includes a list with feedback types. The actual text of the feedback type I’d like to use is stored in the “Title” attribute of the LI tags.
• I’d like to pass an onclick from each of a set of LI tags denoting the type of feedback.
• I would like knockout to receive this onclick event with the calling element
• I’d like the ViewModel function to update the ViewModel’s feedback type based on the content of the LI’s title attribute
• I’d then like to remove a class from all the list and apply it to the selected element.
  • I already have jQuery that does this; just want to incorporate it into the model change.

What I Have So Far

The relevant part of the HTML Feedback Form (the UL list):

        <ul class="thumbnails" id="feedbackList">
            <li class="feedbackItem" id="feedbackItemPraise" title="Praise" data-bind="click: updateFeedbackType"><i class="icon-thumbs-up"></i>Praise</li>
            <li class="feedbackItem" id="feedbackItemCriticism" title="Criticism" data-bind="click: updateFeedbackType"><i class="icon-thumbs-down"></i>Criticism</li>
            <li class="feedbackItem" id="feedbackItemProblem" title="Problem" data-bind="click: updateFeedbackType"><i class="icon-warning-sign"></i>Problem</li>
            <li class="feedbackItem" id="feedbackItemQuestion" title="Question" data-bind="click: updateFeedbackType"><i class="icon-question-sign"></i>Question</li>
        </ul>

The ViewModel so far (including some irrelevant parts):

var FeedbackViewModel = function () {
    var self = this;
    self.manualEMailAddress = "[e-mail]";
    self.manualApplicationName = "MyApplication";
    self.username = ko.observable($("#feedbackUsernameFromServer").val());
    self.feedbackType = ko.observable("Praise");
    self.wantsFollowUp = ko.observable(true);
    self.enteredName = ko.observable("");
    self.feedbackText = ko.observable("");
    self.userNameCaptured = ko.computed(function () { return self.username().length > 3; }, self);
    self.mailToLink = ko.computed(function () { return "mailto:" + self.manualEMailAddress + "?subject=" + encodeURIComponent(self.feedbackType()) + encodeURIComponent(" for ") + encodeURIComponent(self.manualApplicationName) + "&body=" + encodeURIComponent(self.feedbackText()) }, self);
};

var feedbackViewModel = new FeedbackViewModel();

ko.applyBindings(feedbackViewModel, document.getElementById("feedbackModal"));

The current jQuery to change the style (not linked to the model yet):

$("#feedbackList li").click(function () {
    $("#feedbackList li.feedbackItem-Highlighted").removeClass("feedbackItem-Highlighted");
    $(this).addClass("feedbackItem-Highlighted");
});

What I think I need to add to the ViewModel, but doesn’t quite work:

self.updateFeedbackType = function (elementToChangeTo) {
    self.feedbackType($(elementToChangeTo).attr("title"));
    $("#feedbackList li.feedbackItem-Highlighted").removeClass("feedbackItem-Highlighted");
    $(elementToChangeTo).addClass("feedbackItem-Highlighted");
};

This results in feedbackType being turned into an undefined and the visual change not happening.

Where am I going wrong? Thanks for any help!

Answer 1

I think you just needed that function in the definition of the vm.

Here’s a jsfiddle that seems to work:

http://jsfiddle.net/gN3HV/

Update: Here’s a fiddle which better leverages knockout and properly accomplishes the goal:

http://jsfiddle.net/gN3HV/7/