0

AJAX を介して株価を自動的に更新する株式ウォッチャー サイトに取り組んでいます。これにより、変数が更新されたときにサイトの UI を自動的に更新できるように、knockout.js を使用することにしました。

最初のリスト (Web ページのロード時) に次のサンプル JSON オブジェクトがあり、すべての企業が確実に取得されるようにデータベースから取得されます。この例では、次の 4 つの会社があります。

var companiesData = 
[
  {  
     "Date":"2013-04-19",
     "company":"AAA", 
     "close":1.68,
     "open":1.8
  },
  {  
     "Date":"2013-04-19",
     "company":"BBB", 
     "close":13.68,
     "open":12.8
  },
  {  
     "Date":"2013-04-19",
     "company":"CCC", 
     "close":21.68,
     "open":21.6
  },
  {  
     "Date":"2013-04-19",
     "company":"DDD", 
     "close":19.68,
     "open":17.8
  }
]

observableArray オブジェクトを作成し、それを viewModel に割り当てました。

var viewModel = {
    companies = ko.observableArray(companiesData)
}

ko.applyBindings(viewModel);

次に、更新された企業のみを含む更新されたティッカー データと、更新されたデータを取得する Ajax 関数があります。サード パーティの API を使用して更新されたデータを取得しているため、形式を制御できないことに注意してください。AAA と BBB の会社だけが更新されたとします。

var updatedCompaniesData = 
[
  {  
     "company":"AAA", 
     "close":1.90
  },
  {  
     "company":"BBB", 
     "close":15.08
  }
]

observableArray を updatedCompanies で更新すると、observableArray 全体が updatedCompanies に置き換えられ、4 ではなく 2 だけが返され、プロパティが失われます。私はそのドキュメントを読みました

observableArray は、オブジェクトの状態ではなく、配列内にあるオブジェクトを追跡します

そして、新しいデータを持つ特定の企業のみを更新する必要があるが、更新されていない古い企業を保持する必要があるため、各企業の各プロパティを監視可能にする必要があることを学びました。そこで、これにはマッピング プラグインを使用し、配列にキー プロパティを割り当てました。これにより、KO は会社を削除して更新されたものを再度追加するのではなく、キーのみを探して他のプロパティ (open、close、Date) を更新します。また、その create メソッドを使用して、各配列に ko.computed 関数を追加しました。

ko.mapping.fromJS(companiesData, {
    key: function(comp) {
        return ko.utils.unwrapObservable(comp.company);
},
create: function(comp) {
    return new Company(comp.data);
}
}, viewModel.companies);

私の質問は、observableArray ではなく、各会社のプロパティ (価格、始値、終値のみ) を更新するにはどうすればよいですか? observableArray 自体を更新すると、会社の数が「リロード」されます。それを行う「ノックアウト」方法は何ですか？

の更新オプションを見つけましたが、JSON オブジェクトに配列名がないため、このシナリオでそれを使用する方法がわかりません。

ノックアウト マッピング プラグインのドキュメントから

var mapping = {
'name': {
    update: function(options) {
        return options.data + 'foo!';
        }
    }
}

別の質問は、会社の数を変更するつもりがなく、その配列内の各会社のプロパティを更新するだけの場合、observableArray を使用する必要がありますか?

4

1 に答える 1

1

そうです、最後の答えを破棄します。マッピング プラグイン自体のコードを確認したところ、監視可能な配列内の個々の項目を更新するようには設計されていません。私が知る限り、更新されたデータに含まれていない配列項目はすべて削除されます。

したがって、マッピング プラグインを使用してデータを更新するのではなく、単純な for each ループを使用するだけです。

ko.utils.arrayForEach(updatedCompaniesData, function (updatedCompany) {
    var company = ko.utils.arrayFirst(viewModel.companies(), function (item) {
        return item.Name() === updatedCompany.company;
    });

    if (company) {
        company.ClosingPrice(updatedCompany.close);
    }
});

作業中の jsFiddle。

于 2013-04-23T14:21:57.127 に答える