例説明:Observable


基礎概念2:Observableとcomputed
KOのすべての適用シーンを見渡すと、基本的にこの2つの属性は少なくとも1つ使用されます.個人的にはKOが一番よく使うものだと思います.彼らの使い方は以下の通りです.
  • Observable(モニタ属性):自身の属性の変化をモニタし、外部に通知を送信します.外部はsubscribeメソッドによって属性の変化イベントを購読する.
  • Computed(依存プロパティ):以前のバージョンではdependentObservableと呼ばれていましたが、通常は他のObservableに依存し、計算によって独自のデータが得られます.依存項目が変更されると、computed属性は通知を受け、自身の
  • を同期的に更新する.
    例説明:Observable
    基本構文
    1、定義
    var myViewModel = {
        personName: ko.observable('Bob'),//    personName     
        personAge: ko.observable(123)//    personAge     
    };
    
    

    4、

    myViewModel.personName.subscribe(function(newValue) {
        alert("The person's new name is " + newValue);
    });
    
    
    htmlソース:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script src="../Scripts/knockout-3.0.0.js"></script>
        <script src="../Scripts/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var listMode = function () {
                    self = this;
                    self.firstName = ko.observable("5");
                    self.lastName = ko.observable("cihai");
                    self.fullName = ko.computed(function () {
                        return self.firstName() + self.lastName();
                    }, this);
                    self.firstName.subscribe(function (newValue) {
                        alert(newValue);
    
                    });
                }
    
                ko.applyBindings(new listMode());
            });
        </script>
    </head>
    <body>
    
       <strong>firstName</strong><input data-bind="value: firstName" /><br />
           <strong>lastName</strong><input data-bind="value: lastName" /><br />
        <strong>fullName</strong><input data-bind="value: fullName" /><br />
                  <br />
        <button type="button" onclick="show();">  </button>
    </body>
    </html>