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的这个与自我的背景之外 -

您的数据集将是Knockout Observables，但我不知道您打算如何绑定它们。由于它们嵌套在SearchHotel函数内部，并且可能在您的View模型中而不是模型中，因此您可能需要先拥有一个酒店才能搜索它，或者您需要将模型和视图模型逻辑分开并创建用于存储数据的可观察数组。如果一次只返回一个对象，那么显然可以使用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/

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

2 个答案: