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

Question

我有一个带有以下淘汰赛绑定（可见）的 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>

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

<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);
            ...
          }
        }
    }

}

Answer 2

所以另一个答案是绝对正确的，但我觉得你显示的代码存在一个关键缺陷，除了 HotelMasterRow 的 this 与 self 的上下文之外 -

您的数据集将是 Knockout Observables，但我不知道您打算如何绑定到它们。由于它们嵌套在 SearchHotel 函数中，并且可能在您的视图模型中而不是模型中，因此您要么必须拥有一家酒店才能搜索它，要么您需要分离模型和视图模型逻辑并创建一个可观察的数组来存储您的数据。如果一次只返回一个对象，那么您显然可以使用 Observable 代替。

这做了很多事情 - 它允许您不必专门绑定您的可见绑定到 HotelMasterRow（除非有数据，否则不会显示任何数据）或者如果您想继续这样做，它将允许您分开您的担忧并拥有良好的可重复 JavaScript -

在您的 JavaScript 页面中创建一个模型（或任何您想要的地方，只要它可以访问）

function HotelModel(id, name, en, code) {
    var self = this;        
    self.HotelId = ko.observable(id);
    self.SearchHotelName =  ko.observable(name);
    self.HotelEN = ko.observable(en);
    self.HotelCode = ko.observable(code);
}

然后在您的 Ajax 调用成功时创建一个 HotelModel 类型的可观察对象并将其推送到 ObservableArray 中

self.Hotels = ko.observableArray();
self.SearchHotel = function(){
     $.ajax({
        url:"../api/hotel_master_search.php",
        type:"get",
        data:{hotel: this.hotelName},
        cache: false,
        success:function(hotel_data){
            var hdata = $.parseJSON(hdata);
            self.Hotels.push(new HotelModel(hdata[0].hotel_id, hdata[0].hotel_name, hdata[0].hotelEN, hdata[0].hotelcode));       
            self.HotelMasterRow(true);
        }
    });
}; 

http://jsfiddle.net/G5KAU/