0

Knockout に関するコードを見て、調べてみましたが、このコードがどのように機能するのか理解できませんでした。通常のメソッドを Knockout ビューモデルにバインドするための完全なコードを次に示します。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/knockout-2.2.1.js"></script>
    <script src="Scripts/jquery-1.7.1.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" data-bind="click: callalert" name="knockoutbtn" value="Call Knockout Method"/>
        <input type="button" name="normalbtn" id="nbtn" value="Call Normal Method"/>

        <script type="text/javascript">
            var callmethod = function () {   //Normal Method which would be 
                alert('hello');              //called from knockout binding   
            }                                //also from the normal button click  
            $(document).ready(function () {           //Binded the Method with normal button 
                $("#nbtn").live("click", callmethod);
            });

            ko.applyBindings({                        //Binded the method with ko view model
                callalert : callmethod
            });

        </script>
    </div>
    </form>
</body>
</html>

このコードの意味がわかりません: また、このコードdata-bind="click: callalert" もわかりません:

ko.applyBindings({                        //Binded the method with ko view model
                callalert : callmethod
            });

ユーザーが最初のボタンをクリックすると、名前付きのメソッドが呼び出されるようcallalertですが、コードには という名前のメソッドはありませんcallalert。ユーザーが 2 番目のボタンをクリックすると、named というメソッドが呼び出されcallmethodます。

ですから、上記のコードを理解するのを手伝ってください。特にこの2点

1) data-bind="click: callalert"
2) ko.applyBindings({                        //Binded the method with ko view model
                    callalert : callmethod
                });

アップデート

誰かがそれを下に見たら

var person = {
    firstName: 'John',
    lastName: 'Doe',
    sayHi: sayHiFunction,
    pets: ['Cat', 'Dog']
};

それでは、 sayHiFunction() のようなブラケットがないため、 sayHiFunction が関数であることをどのように理解するでしょうか?

上記のコードを見ればわかります

$(document).ready(function () {           //Binded the Method with normal button 
      $("#nbtn").live("click", callmethod);
});

そのcallmethodはjqueryコードで呼び出しています。ユーザーがボタンをクリックしたときに callmethod を呼び出す必要があることをコードで定義するのはなぜですか。一度それがjqueryによって行われ、一度それがノックアウトバインディングによって行われますか? 詳しく説明していただけますか。

jquery部分を削除すると、ユーザーがボタンをクリックしたときにcallmethodが呼び出されます。あなたの答えを待っています。ありがとう

4

1 に答える 1

3

Javascript オブジェクト

{ callalert : callmethod }

は、1 つのプロパティを持つ通常の JavaScript オブジェクトです: callalert. JS では、キーと値のペアの方法でオブジェクトを構築できます。

var person = {
    firstName: 'John',
    lastName: 'Doe',
    sayHi: function() {
        alert('Hi!');
    },
    pets: ['Cat', 'Dog']
};

これは、変数に入れて 4 つのプロパティを与えるオブジェクトを作成しますperson。2 つの通常のプロパティ (文字列型)、1 つの関数、および配列です。

JS では関数もオブジェクトなので、変数に入れてそのまま使用できます。そのため、関数を定義して変数に入れ (変数で行っているようにcallmethod)、それをオブジェクトのメンバーに割り当てることができます (callalertプロパティで行っているように)。

これは私の例でも機能します：

var sayHiFunction = function() {
    alert('Hi!');
};

var person = {
    firstName: 'John',
    lastName: 'Doe',
    sayHi: sayHiFunction,
    pets: ['Cat', 'Dog']
};

ノックアウト applyBindings

次、

ko.applyBindings

JavaScript オブジェクトを受け入れます。通常、観察可能なプロパティ (Knockout によって処理されるプロパティ) を持つオブジェクトを使用しますが、関数を含めることもできます。

あなたの場合、機能しかありません。関数の実装は で、callmethod呼び出す識別子は ですcallalert。

したがって、次のようにします。

var myVariable = { callalert : callmethod };
myVariable.callalert();

アラートが表示されます。callalert関数 ( の実装を持つ) である1 つのメンバー ( ) を持つオブジェクトを効果的に作成し、callmethodそれを に配置しましたmyVariable。

ノックアウトデータバインド

ここで、 Knockout に、イベントをビューモデル (渡したオブジェクト) のプロパティにdata-bind="click: callalert"データバインドする必要があることを知らせます。ボタンをクリックすると、Knockout はビューモデルの callalert メソッドを呼び出します。clickcallalertapplyBindings

更新-jQuery

jQuery コードは確かに読みやすくなっています。しかし、UI が複雑な場合は、(コントロールの非表示、表示、更新などのために) 多くの jQuery コードが必要になることがよくあります。これは、保守と読み取りが簡単に難しくなる可能性があります。これには、Knockout とその MVVM アプローチが役立ちます。

コードに2回ある理由は、私が信じている違いを示すためです。最初のボタンは Knockout を使用してメソッドを呼び出し、2 番目のボタンは jQuery を使用します。

どちらも有効なアプローチです。実際、それほど単純な場合は jQuery をお勧めします。しかし、より複雑な UI を使用している場合、またはプロジェクトで他の画面で UI を使用している場合は、Knockout を使用することをお勧めします。

はどうかと言うと

sayHiFunction() のようなブラケットがないため、 sayHiFunction が関数であることを誰がどのように理解するでしょうか?

すぐにはわかりませんが、変数であることはわかっているので、変数を探せばわかります。しかし、実行時に関数の実装を動的に設定する必要がない限り、このように記述する理由はありません。関数をインラインで記述します。

var person = {
    sayHi: function() {
        alert('Hi');
    }
}

ただし、それでも変更できます。

person.sayHi = function() {
    alert('Hello!');
}

これにより JS は強力な言語になりますが、実際には初心者にとって読みやすいとは限りません。

于 2013-07-10T08:24:23.433 に答える