javascript - 如何正确引用传递给 knockout.JS 的当前元素的属性？

Question

正在处理一个小的反馈表，我是 Knockout/jQuery 游戏的新手，所以我确定这是一个语法错误。

目标/背景

• 我有一个反馈表，其中一部分包括一个反馈类型列表。我想使用的反馈类型的实际文本存储在 LI 标签的“标题”属性中。
• 我想从一组表示反馈类型的 LI 标记中的每一个传递一个 onclick。
• 我希望 knockout 通过调用元素接收这个 onclick 事件
• 我希望 ViewModel 函数根据 LI 的 title 属性的内容更新 ViewModel 的反馈类型
• 然后我想从所有列表中删除一个类并将其应用于所选元素。
  • 我已经有了执行此操作的 jQuery；只是想将其合并到模型更改中。

到目前为止我有什么

HTML 反馈表(UL 列表)的相关部分:

        <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>

到目前为止的 ViewModel(包括一些不相关的部分):

var FeedbackViewModel = function () {
    var self = this;
    self.manualEMailAddress = "MyEmail@MyProvider.com";
    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"));

当前要更改样式的 jQuery(尚未链接到模型):

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

我认为我需要添加到 ViewModel，但效果不佳的内容:

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

这会导致 feedbackType 变为未定义，并且不会发生视觉变化。

我哪里错了？感谢您的帮助!

Answer 1

我认为您只需要在 vm 的定义中使用该函数。

这是一个似乎有效的 jsfiddle:

http://jsfiddle.net/gN3HV/

更新:这是一个更好地利用 knockout 并正确实现目标的 fiddle :

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