javascript - 使用 knockout.js 将 Bootstrap 按钮类从禁用更改为启用

Question

以下是我的 HTML:

            <ul class="nav navbar-nav pull-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" data-bind="text: fullName"></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Accounts & Settings</a></li>
                        <li><a href="#" data-bind="click: sout">Sign Out</a></li>
                    </ul>
                </li>
            </ul>
            <div class="input-group">
                <input type="text" class="form-control" id="hotels" placeholder="Search by Hotel Name or Hotel ID" data-bind='value: hotelName'>
                <span class="input-group-btn">
                    <button class="btn btn-success disabled" type="submit" data-bind="css: enablebtn">Search</button>
                </span>
            </div>

我使用 knockout.js 文本绑定(bind)来获取 anchor 标记内的 fullName 值，并使用 CSS 绑定(bind)在两个计算的可观察量的帮助下启用禁用的按钮。两个计算的可观察量中的任何一个都不起作用。

但是，如果我删除与 CSS 绑定(bind)相关的计算可观察值，则文本绑定(bind)似乎可以完美工作。

关于为什么我无法在 Knockout.JS 代码中添加两个计算变量有什么帮助吗？

以下是实现相同功能的完整 Java 脚本代码:

$(document).ready(function(){
function appModel(session_info){
    var temp = $.parseJSON(session_info);
    this.userName = ko.observable(temp[0].user_name);
    this.firstName = ko.observable(temp[0].first_name);
    this.lastName = ko.observable(temp[0].last_name);
    this.hotelName = ko.observable("");

    this.fullName = ko.computed(function(){
        return this.firstName() + " " + this.lastName();
    }, this);

    this.enablebtn = ko.computed(function(){
        return this.hotelName().length() > 0 ? "enabled":"disabled";
    }, this);

    this.sout = function(){
        $.ajax({
            url:"../api/sessions.php",
            type:"get",
            data: {rqtype: '0'},
            cache:false,
            success:function(session_info){
                var data = $.parseJSON(session_info);
                if (data.status == 'Invalid_id'){
                    window.location.replace('../files/main.html');
                }
            }
        });
    }
};

$.ajax({
    url:"../api/sessions.php",
    type:"get",
    data: {rqtype: '1'},
    cache:false,
    success:function(session_info){
        var data = $.parseJSON(session_info);
        if (data.status == 'Invalid_id'){
            window.location.replace('../files/main.html');
        } else {
            ko.applyBindings(new appModel(session_info));
        }
    }
});

$(function(){
    $("#hotels").autocomplete({
        source:'../api/hotel_list_typehead.php',
        minLength:2
    });
});

});

仅供引用:示例 JSON

(Session_info:{"user_name":"prad@ac.com","first_name":"saurabh","last_name":"pradhan"})

Answer 1

string.length是一个属性而不是一个函数。因此，您的 enablebtn 中有一组额外的 ()。

正确的版本应该如下所示:

this.enablebtn = ko.computed(function(){
    return this.hotelName().length > 0 ? "enabled":"disabled";
}, this);