1

小さなフィードバックフォームに取り組んでいて、私はKnockout / jQueryゲームに慣れていないので、これは構文エラーであると確信しています。

目標/背景

  • フィードバックフォームがあり、その一部にフィードバックタイプのリストが含まれています。使用したいフィードバックタイプの実際のテキストは、LIタグの「タイトル」属性に保存されます。
  • フィードバックのタイプを示す一連のLIタグのそれぞれからonclickを渡したいと思います。
  • 呼び出し元の要素でこのonclickイベントをノックアウトで受信したい
  • ViewModel関数で、LIのタイトル属性の内容に基づいて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 とは少し異なります。

渡される 2 番目の引数は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 に答える