1

これは初心者の質問であり、言うまでもなく、私はノックアウト js に非常に慣れていません。私がやろうとしているのは、サーバーから単一の栽培者 (名前、会社、住所) の詳細を取得し、それを Web ページに表示することだけです。jQuery モバイルを使用しているため、 $(document).bind('pageinit', function () を使用しています。

今私のコードは次のとおりです。

    <h3><span data-bind="text: Name"></span></h3>
    <span data-bind="text: Company"></span><br />
    <span data-bind="text: Address"></span>

    <script type="text/javascript">

       $(document).bind('pageinit', function () {

         function MyGrowerModel() {
            //this.Name = "My Name";
            //this.Company = "My Company";
            //this.Address = "My Address";

            //Load initial state from server, convert it to Task instances, then  opulate self.tasks
            $.getJSON("Grower/GetGrower", function (allData) {

             this.Name = allData.Name;
             this.Company = allData.Company;
             this.Address = allData.Address;
             alert(allData.Name); //works!
         });
        }

        ko.applyBindings(new MyGrowerModel());

       });
       </script>

「バインディングを解析できません。メッセージ: ReferenceError: 名前が定義されていません。バインディング値: 名前

Name、Company、および Address は getJSON 関数内でスコープされるため、これは理にかなっています。だから、私の質問は、これらの変数をどこで宣言し、それらの ViewModel データを更新する方法ですか?

マッピング プラグインを使用したくありません。

どんな助けでも大歓迎です。

4

2 に答える 2

3

監視可能なプロパティを使用する必要があります。そうすれば、$。getJSONリクエストが完了すると、ビューが新しいデータで更新されます。 

<h3><span data-bind="text: Name"></span></h3>
<span data-bind="text: Company"></span><br />
<span data-bind="text: Address"></span>

<script type="text/javascript">

    function MyGrowerModel() {
        var self = this;
        self.Name = ko.observable('');
        self.Company = ko.observable('');
        self.Address = ko.observable('');

        self.Name.subscribe(function(newValue) {
            alert("Name has changed: " + newValue);
        });

        //Load initial state from server and populate viewmodel
        $.getJSON("Grower/GetGrower", function (allData) {
             self.Name(allData.Name);
             self.Company(allData.Company);
             self.Address(allData.Address);
        });
    }

   $(document).bind('pageinit', function () {
        ko.applyBindings(new MyGrowerModel());
   });
</script>
于 2012-09-14T20:35:07.850 に答える
1

オブジェクトへの参照を保持する必要があります。

function MyGrowerModel() {
    var self = this;
    //Load initial state from server, convert it to Task instances, then populate self.tasks
    $.getJSON("Grower/GetGrower", function (allData) {
         self.Name = allData.Name;
         self.Company = allData.Company;
         self.Address = allData.Address;
    });
}

ただし、問題はそれだけではありません。$.getJSONデフォルトでは非同期ですasync: false。バインディングを適用するには、コールバック関数を設定または変更する必要があります。より良い解決策は、オブザーバブルを使用することです。

function MyGrowerModel() {
    var self = this;
    self.Name = ko.observable(''); // Value shown before getJSON returns
    self.Company = ko.observable('');
    self.Address = ko.observable('');
    //Load initial state from server, convert it to Task instances, then populate self.tasks
    $.getJSON("Grower/GetGrower", function (allData) {
         self.Name(allData.Name);
         self.Company(allData.Company);
         self.Address(allData.Address);
    });
}

これにより、最初はName、Company、およびAddressごとに空の文字列が表示され、getJSON呼び出しから返されたデータに自動的に更新されます。

于 2012-09-14T20:29:19.817 に答える