Question

我使用Knockoutjs模板绑定。我的JavaScript代码：

var viewModel = {
            messages: ko.observableArray()
        };
        ko.applyBindings(viewModel);
        $.getJSON('@Url.Action("statusMessages", "Home")', function (data) {
            viewModel.messages(data);
        });

        $(".like").click(function click  () {
            var Id = $(this).data("id");
            $.ajax({
                url: '/Home/Like/' + Id,
                type: 'POST',
                success: function (data) {
                    alert("Beğendi");
                }
            });
        });

我的HTML代码是：

<button data-id="MessageId" class="btn btn-default like">
    <span data-bind="text:LikeCount"></span> 
    <i class="fa fa-thumbs-o-up"></i>
</button>

.like click()功能不起作用。我该怎么办？

Answer 1

在这种情况下我不会使用jquery事件监听器，因为当消息数组更新时，由于在之后添加它们，它们不会附加事件。

Pure Knockout Solution

<button class="btn btn-default like" data-bind="click: like.bind($data)">
    <span data-bind="text:LikeCount"></span> 
    <i class="fa fa-thumbs-o-up"></i>
</button>

模型

var MessageModel = function (data) {
   var self = this;
   self.MessageId = ko.observable('');
   self.LikeCount = ko.observable(0);

   self.like = function () {
        var c = self.LikeCount();
        self.LikeCount(c++);
        $.ajax({
            url: '/Home/Like/' + self.MessageId(),
            type: 'POST',
            success: function (data) {
                alert("Beğendi");
            }
        });
   }
};

如上所述，由于未呈现，like事件侦听器无法正常工作。因此，如果您想使用原始代码：

获取数据后应用绑定：

    $.getJSON('@Url.Action("statusMessages", "Home")', function (data) {
        viewModel.messages(data);
        ko.applyBindings(viewModel);
    });

或在获取数据时应用事件监听器（可能更合适）：</ p>

    $.getJSON('@Url.Action("statusMessages", "Home")', function (data) {
        viewModel.messages(data);
        $(".like").click(function click  () {
            var Id = $(this).data("id");
            $.ajax({
               url: '/Home/Like/' + Id,
               type: 'POST',
               success: function (data) {
                  alert("Beğendi");
               }
            });
        });
    });

KnockoutJS模板绑定按钮单击

1 个答案: