Knockoutjs按钮单击

时间:2017-07-07 14:08:20

标签: asp.net-mvc knockout.js

你怎么能通过knockoutjs点击事件我的按钮代码

获得我的价值
 <button data-bind="click : LikeButtonClick , value : MessageId" class="btn btn-default like"><span data-bind="text:LikeCount"></span> <i class="fa fa-thumbs-o-up"></i></button>

和我的knockoutjs点击代码

 var LikeButtonClick = function () {
    alert("");
 }

如何在按钮点击事件之后刷新我的喜欢。我使用模板绑定。我的模板绑定代码是

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

和我喜欢的按钮代码

var LikeButtonClick = function (id) {
            $.ajax({
                url: '/Home/Like/' + id,
                type: 'POST',
                success: function (data) {
                        // refresh
                        });
                }
            });
        }

2 个答案:

答案 0 :(得分:2)

另一种方法是将click函数构建到数据模型中。在这里,我直接将该功能添加到项目中。每次点击只会影响它自己的对象信息。

function Post() {
  var self = this;
  self.Text = ko.observable("Lorem Ipsum");
  self.Liked = ko.observable(false);
  self.LikeCount = ko.computed(function() {
    return self.Liked() ? 1 : 0;
  });
  self.MessageId = ko.observable(1);


  self.LikeButtonClick = function() {
    self.Liked(!self.Liked());
  }

}

function viewModel() {
  var self = this;

  self.Posts = ko.observableArray();

  self.Load = function() {
    self.Posts.push(new Post());
    self.Posts.push(new Post());
    self.Posts.push(new Post());
  }
  self.Load();
}

ko.applyBindings(new viewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="foreach: Posts">

  <div data-bind="text:Text"></div>
  <button data-bind="click: LikeButtonClick, value: MessageId" class="btn btn-default like">
<span data-bind="text:LikeCount"></span>
<i class="fa fa-thumbs-o-up"></i></button>
</div>

答案 1 :(得分:1)

传递给方法的

this上下文将是您的viewmodel,或者您绑定到该元素的任何内容。在LikeButtonClick内,您应该可以通过引用属性MessageId来获取this.MessageId()的值。

如果要将值传递给click处理程序,则需要声明数据绑定的内联函数,或者将函数与上下文绑定。这里的上下文是主视图模型:

data-bind="click: LikeButtonClick.bind($root,'green')"

var LikeButtonClick = function (src) {
        alert(src); // src='green' in this example
    }