は... ObservableArray

Question

それはWEBAPI負荷データの呼び出しから読み込まれたように私は動的でデータオブジェクトを持っているにオブジェクトを追加してから使用して、観察に変換：

$.get("/api/PlateTemplate/Get", { id: self.TemplateId() }).done(function (data) { 
      ko.mapping.fromJS(data, {}, self.Data); 
      self.IsDataLoaded(true); 
     }); 

フィールドの1つが観察されます別のオブジェクト型の配列私はこれを使用してUIにいくつかのタブを描画します。

<div id="plateTemplate" data-bind="with: Data"> 
<ul class="nav nav-tabs" data-bind="foreach: PlateTemplateGroups"> 
       <li data-bind="css: {active: $index()==0}"><a data-toggle="tab" data-bind="attr: {href: ('#tabId' + $index())}"><span data-bind="text: Description"></span></a></li> 
</ul> 

これは機能します。すべての良い。私は、新しいタブを追加するために使用したいボタンがあります。私は、ユーザーが名前を入力し、ボタンをクリックすることができます。私は新しいタブを追加したい。

しかし、最初に、私のタブグループが「観察」していることを確認するために、私は最初のタブに名前の変更をハードコード：だから、私は私のデータオブジェクトに新しい項目を追加しようと

self.Data().PlateTemplateGroups()[0].Description("hahahaha"); 

実行すると、最初のタブに名前の変更が表示されます。また、自分のコントローラにself.Data（）をポストすると、変更が反映されます。

は、その後、私は新しい項目を追加しよう：

self.Data().PlateTemplateGroups().push({ Id: ko.observable(0), Description: ko.observable(name), Components: ko.observableArray([]) }); 

これが実行されますが、新しいタブが表示されません。

しかし、モデルを私の.Netコントローラに戻すと、新しいアイテムが表示されます。

新しいタブが表示されませんなぜ何らかの理由はありますか？たぶんobervableArrayに間違って追加していますか？私はいつも（）を使ってオブジェクトを参照する必要があるのか​​と心配しています。

Answer 1

ViewModelには、観測可能なプロパティDataがあります。このプロパティには、PlateTemplateGroupsという観測可能な配列のような他のプロパティがあります。あなたはpush()でPlateTemplateGroupsに要素を追加することができ、今

Data() 

：：Dataは、オブジェクトが含まれている観測可能である

ので、あなたは、このオブジェクトを取得するための関数としてそれを呼び出す必要が

​​

例としてCodepenがあります。ボタンをクリックすると、TemplateGroupが追加されます。