1

以下は私の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>

ノックアウト.js テキスト バインディングを使用してアンカー タグ内の fullName の値を取得し、CSS バインディングを使用して 2 つの計算されたオブザーバブルを使用して無効なボタンを有効にしています。計算された 2 つのオブザーバブルのいずれかが機能していません。

ただし、CSSバインディングに関連する計算されたオブザーバブルを削除すると、テキストバインディングは完璧に機能するようです。

Knockout.JS コードに 2 つの計算変数を追加できない理由について何か助けはありますか?

以下は、同じことを実現するための完全な 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"})
4

1 に答える 1

1

はstring.lengthプロパティであり、関数ではありません。したがって、 に の余分なセットが()ありますenablebtn。

正しいバージョンは次のようになります。

this.enablebtn = ko.computed(function(){
    return this.hotelName().length > 0 ? "enabled":"disabled";
}, this);
于 2013-08-01T20:20:03.293 に答える