ノックアウトjs foreachの仕事を得る方法

Question

私はノックアウトjsを学ぶのを助けるために、簡単な予算のアプリを作成しています。

私がしようとしているのは、ユーザーが請求書のリストを表すJSONオブジェクトを入力またはロードできるようにすることです。使用すると、次の給料日の日付を入力し、[週の範囲]ボタンをクリックすることができます。必要に応じて、新しい請求書を入力することができます。これは、次の給料日の日付を格納する配列を生成します。今のところ、請求書を取得するボタンをクリックするだけで、ハードコードされたデータから請求書配列を読み込むことができます。その後、予算の設定ボタンをクリックしてweekRange配列とbill配列を処理します。その週の請求書を表すオブジェクトが作成され、予算アレイにプラグインされます。

foreachバインディングを使用して予算配列の表示を開始しようとする場合を除き、すべてが機能しています。

これを参照してくださいコードここBudget JS Fiddle ためフィドルをjsが紙幣とweekRangeアレイ

self.setBudget = function() { 
     self.budget.removeAll(); 
     for (var i = 0; i < self.weekRange().length; i++) {    
      var weekOf = self.weekRange()[i]; 
      var startDate = moment(weekOf); 
      var endDate = moment(self.weekRange()[i + 1]); 

      var thisWeeksBill = new weeklyBill(); 
      thisWeeksBill.startOfWeek(weekOf);  

      for (var j = 0; j < self.bills().length; j++) { 
       var date = moment(self.bills()[j].dueDate()); 

       if (date.isBetween(startDate, endDate, null, '[)')) { 
        var jsBill= ko.toJS(self.bills()[j]); 
        thisWeeksBill.weeklyBills().push(new bill(jsBill));     
        self.bills()[j].dueDate(date.add(1, 'months').format("YYYY-MM-DD"))      
       } 
      } 
      thisWeeksBill.weeklyAmount(totalWeeklyBills(thisWeeksBill)); 
      self.budget().push(thisWeeksBill);    

     } 
     console.log(self.budget()); 
    } 

結合foreachの持つテーブルのHTMLを処理する機能である

<table class="table table-responsive"> 
     <thead> 
      <tr> 
       <td>Week Of</td>    
      </tr> 
     </thead> 
     <tbody data-bind="foreach: budget"> 
      <tr> 
       <td data-bind="textinput: startOfWeek"></td> 
      </tr> 
     </tbody> 
    </table> 

devツールをプルアップしてコンソールに注目すると、WeekRangeボタンをクリックした後weekRange配列に値が設定され、Setをクリックすると予算配列が設定されることがわかります予算ボタンですが、（今のところ）毎週の開始日のリストを表示するだけのテーブルでは何も起こりません。

Answer 1

Bryan Dellingerがコメントに指摘したように、pushで問題がありました。私はそれが実際には構文エラーだとは言わないでしょう - あなたは本当に要素を配列にプッシュしています。 基本的な配列を変更していて、更新通知をトリガーしないという問題。あなたが上で直接pushを使用する場合、観察、しかし、ノックアウトの機能は、プッシュやスプライスなど配列の内容を変更、機能の更新通知

をトリガーする、KOの方法は、自動的にその依存関係の追跡メカニズムをトリガー登録されているすべてのリスナーに変更が通知され、UIが自動的に更新されます。 [1]

Observableの基本オブジェクトを変更しても更新がトリガーされないということは明示的には言いませんが、それは動作です。しかし、オブザーバブルでvalueHasMutated()関数を使用すると、強制的に更新を行うことができます。したがって、基本的な配列を更新したい場合は、多くの変更を行い、1つの更新のみが必要な場合は、更新をスキップするようにしてください。