使用 knockout.js 将引导按钮类从禁用更改为启用答案

【问题标题】：Change bootstrap button class from disabled to enable using knockout.js使用 knockout.js 将引导按钮类从禁用更改为启用
【发布时间】：2013-08-02 04:20:03
【问题描述】：

以下是我的 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 文本绑定来获取锚标记内的 fullName 的值，并使用 CSS 绑定在两个计算的 observable 的帮助下启用禁用的按钮。两个计算的 observable 中的任何一个都不起作用。

但是，如果我删除与 CSS 绑定相关的计算出的 observable，那么文本绑定似乎可以完美运行。

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

以下是实现相同功能的完整 Java Script 代码：

$(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"})

【问题讨论】：

你检查过你的浏览器 JavaScript 控制台，有没有错误？

标签： javascript jquery twitter-bootstrap knockout.js

【解决方案1】：

string.length 是属性而不是函数。所以你的enablebtn 中有一组额外的()。

正确的版本应该是这样的：

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

【讨论】：

完美！像魅力一样工作，谢谢。