2017-10-26 28 views
1

私はKnockoutJSには新しく、マスターレベルのASP.NET MVCビュー用に3レベルのモデルバインディングを作成しようとしています。ここノックアウト3レベルマッピング、第3レベルdoes not change

は、私がこの動作を実装しようとしている画面です:

enter image description here 私は、次のViewModelデザイン

public class CreateReservationViewModel 
{ 

    public string Title { get; set; } 
    public String LogoPath { get; set; } 
    public string StartDate { get; set; } 
    public string EndDate { get; set; } 
    public string StartTime { get; set; } 
    public string EndTime { get; set; } 
    public int TimeSpan { get; set; } 
    public int MinPersons { get; set; } 
    public int MaxPersons { get; set; } 
    public List<ReservationOptionViewModel> ReservationOptions { get; set; } 
    public string MessageToClient { get; set; } 
    public CreateReservationViewModel() 
    { 
     ReservationOptions = new List<ReservationOptionViewModel>(); 
    } 
} 

public class ReservationOptionViewModel 
{ 
    public int Id { get; set; } 
    public string Title { get; set; } 
    public int TypeId { get; set; } 
    public string TypeDescription { get; set; } 
    public string Info { get; set; } 
    public List<ValuesViewModel> ReservationOptionValues { get; set; } 
    public ReservationOptionViewModel() 
    { 
     ReservationOptionValues = new List<ValuesViewModel>(); 
    } 
} 

public class ValuesViewModel 
{ 
    public int Id { get; set; } 
    public string ValueTitle { get; set; } // this value i cant seem to get to bind user input always defaults to whatever i set it in knockout 
} 

、ここでは私の.jsであるとhttps://jsfiddle.net/camLpdty/

を.htmlの持っています私は正常に第1レベルと第2レベルをバインドすることができますが、第3レベルのバインディングは常に既定値を取得します。つまり、[({Id:0、ValueTitle: "これは読み取り専用と変更できません"})]}}

enter image description here

他のすべてが動作しているようです...

+0

第3レベルはデフォルト値「Add Option」をクリックしたときのみ、どの時点でデフォルト以外の値を持つことを期待していますか? –

+0

さて、コードを変更しようとしていますが、前回はフィールドでhtmlを見たところ、値の列のバインディングコンテキストが少しずれているように見えました。 data-bind = "value:Values.ValueTitle" - 値は配列ですが、単一の入力ボックスをバインドしようとしています。どの要素のValueTitleを使用するのかわからないので、おそらく何にも束縛されていません。 「foreach」を使うか、その情報をどのように表示するかを変更する必要があります。 –

+0

私は本当にあなたの助けに感謝します。混乱する人を避けるためにコードを取りましたが、あなたがそれを複製しようとしたので!私はすべてを元の状態に正確に戻します。あなたの質問に答えるために、3つ目のレベルは、ユーザーが「追加オプション」をクリックしたときにデフォルト値を持ち、そこにテキストを追加したときと、「追加オプション」をクリックしたときにユーザー入力を得ることを期待しています。 私はあなたの参照のためにフィドルを戻しましたhttps://jsfiddle.net/camLpdty/ありがとう!!! – harris

答えて

0

あなたjsfiddleからの値の列のバインディングコンテキストは少しオフになっているように見えます。 data-bind="value: Values.ValueTitle" - 値は配列ですが、単一の入力ボックスをバインドしようとしています。どの要素のValueTitleを使用するのかわからないので、おそらく何にも束縛されていません。

<td> 
    <input class="form-control input-sm" 
     data-bind="value: ReservationOptionValues.ValueTitle" /> 
</td> 

<td data-bind="foreach: ReservationOptionValues"> 
    <input class="form-control input-sm" data-bind="value: ValueTitle" /> 
</td> 

へ:あなたは「foreachの」を使用するか、あなたはあなたからその最後のバインディングを変更してみてください簡単なテストとして、その情報

を表示している方法を変更する必要があります

これはValues配列内のすべての要素の入力ボックスを作成するので、このように残したくないかもしれませんが、ノックアウトコンテキストの問題を強調する必要があります

関連する問題