1

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

目标/背景

  • 我有一个反馈表，其中一部分包括一个包含反馈类型的列表。我想使用的反馈类型的实际文本存储在 LI 标记的“标题”属性中。
  • 我想从一组表示反馈类型的 LI 标记中传递一个 onclick。
  • 我希望淘汰赛通过调用元素接收此 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 变成未定义的，并且视觉变化不会发生。

我哪里错了？谢谢你的帮助！

4

2 回答 2

2

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

这是一个似乎有效的jsfiddle：

http://jsfiddle.net/gN3HV/

更新：这是一个更好地利用淘汰赛并正确实现目标的小提琴：

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

于 2012-09-12T16:26:05.473 回答
1

elementToChangeTo返回 FeedbackViewModel（与 相同this）而不是单击的元素——行为与 jQuery 有点不同。

传入的第二个参数updateFeedbackType将是一个事件，因此您可以使用它$(event.target)来获取对单击元素的引用。

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

但是，@daedalus28 解决了更大的问题，即您没有利用 knockout.js 的优势并且使过程过于复杂。你真的不需要两者来解决这个简单的条件。

于 2012-09-12T19:47:51.637 回答