javascript - 如何在ajax成功时将knockout.js可见绑定(bind)设置为true？

Question

我有一个带有以下 knockout 绑定(bind)(可见)的 HTML div:

<div class="row"  data-bind="visible: HotelMasterRow">
    <div class="col col-lg-4">
        <div class="panel">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-edit pull-right"></span> Hotel Master
            </div>
        </div>
    </div>
</div>

页面加载时，可见绑定(bind)设置为 false。我正在尝试在 Ajax 成功事件上切换可见绑定(bind)。以下是我发起 Ajax 请求的点击绑定(bind):

<button class="btn btn-success disabled" type="submit" data-bind="css: enablebtn, click: SearchHotel">Search</button>

实现相同功能的 JavaScript 代码是:

this.SearchHotel = function(){
            $.ajax({
                url:"../api/hotel_master_search.php",
                type:"get",
                data:{hotel: this.hotelName},
                cache: false,
                success:function(hotel_data){
                    var hotel_data = $.parseJSON(hotel_data);
                    this.HotelId = ko.observable(hotel_data[0].hotel_id);
                    this.SearchHotelName =  ko.observable(hotel_data[0].hotel_name);
                    this.HotelEN = ko.observable(hotel_data[0].hotelEN);
                    this.HotelCode = ko.observable(hotel_data[0].hotelcode);

                    this.HotelMasterRow(true);
                }
            });
        }

即使 Ajax 响应确实返回了正确的数据， this.HotelMasterRow(true);似乎不起作用。 div 仍然不可见。知道为什么吗？

Answer 1

“this”在成功回调的范围内并不引用您的模型。您想要做的是在模型中声明一个引用“this”的变量，并在成功回调中调用该变量。类似这样的事情:

var Model = function() {
    var self = this;

    this.SearchHotel = function() {
        $.ajax({
            ...
          success: function(data) {
            ...
            self.HotelMasterRow(true);
            ...
          }
        }
    }

}