ノックアウトjs、配列に追加の要素を追加する

Question

配列の項目に余分な要素を追加するアプリがあります。達成しようとしているもののcreated a fiddleがあります。

ユーザーがアプリを起動すると、次にアイテムと説明のいくつかの詳細を入力し、次に[次へ]をクリックしてアイテムの価格を入力する必要があります（これは私が立ち往生した場所です）。この例は、私が間違っているように見える価格部分を試して実装するときのように、ある点まで働いています。アイテムを配列に追加すると、次にそのアイテムをクリックすると表示されますが、配列の現在のアイテムに要素を追加するにはどうすればよいでしょうか。場合、私が意味をなされていませんでしたロジックは次のようになります。

スタート ページ1私はすべての1ページが、私にこれを行うことができます理解 ページ2（入力した価格）

（名前と説明を入力します）ノックアウトで名前と説明ページの後に価格を追加できるようにしたいと思わないでください。私はまた、戻って項目を修正することができるようにしたいと思います。あなたは私が次にやるべきことを見て助けることができますか？

名前と説明を挿入すると、アレイの空の要素も値段で作る必要がありますか？その後、価格が何らかの形で入力されると、これを配列のprice要素に挿入しますか？どのように実装すればよいかわからない

これが私の最初のノックアウトアプリです私が実際にやったことは正しい場合ので、私は驚いて、任意のヘルプまたはポインタをありがたく受け取った:)

私のコードは以下の通りです：

$(function() { 
 
\t var main = new stuff(); 
 
\t ko.applyBindings(main, $('#ko')[0]); 
 
}); 
 

 
function Item(data) { 
 
\t this.itemname = ko.observable(data.itemname); 
 
\t this.itemdescription = ko.observable(data.itemdescription); 
 
\t this.itemenabled = ko.observable(data.itemenabled); 
 
} 
 

 
function stuff() { 
 
\t var self = this; 
 

 
\t self.items = ko.observableArray([]); 
 
\t self.newItemName = ko.observable(); 
 
\t self.newItemDescription = ko.observable(); 
 
\t self.newItemEnabled = ko.observable(); 
 

 
\t // Operations 
 
\t self.addItem = function() { 
 
\t \t self.items.push(new Item({ 
 
\t \t \t itemname: this.newItemName(), 
 
\t \t \t itemdescription: this.newItemDescription(), 
 
\t \t \t itemenabled: this.newItemEnabled() 
 
\t \t })); 
 
\t }; 
 
}; 
 

 
//jquery stuff 
 
$('#start').on('click', function(e) { 
 
\t $("#page1").show(500); 
 
\t $('#panel1').css('visibility', 'visible').hide().fadeIn().removeClass('hidden'); 
 
\t $("#start").hide(500); 
 
}) 
 

 
$('#back').on('click', function(e) { 
 
\t $("#panel1").hide(500); \t \t \t 
 
\t $("#page1").hide(500); \t \t \t 
 
\t $("#start").show(500); 
 
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<button type="submit" class="btn btn-primary" id="start">Start</button> 
 

 
<div id="ko"> 
 
\t <div class="panel panel-default hidden" id="panel1"> 
 
\t \t <div id="page1"> 
 
\t \t \t <form data-bind="submit: addItem"> 
 
\t \t \t \t <div class="panel panel-default" style="padding: 15px 0px 0px 0px;" id="panel2"> 
 
\t \t \t \t \t <div class="container"> 
 
\t \t \t \t \t \t <div class="form-group row"> 
 
\t \t \t \t \t \t \t <label for="inputItemName" class="col-lg-3 col-form-label">Enter Item Name</label> 
 
\t \t \t \t \t \t \t <div class="col-lg-8"> 
 
\t \t \t \t \t \t \t \t <input type="text" class="form-control form-control-lg" id="inputItemName" data-bind="value: newItemName" placeholder=""> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="form-group row"> 
 
\t \t \t \t \t \t \t <label for="textareaItemDescription" class="col-lg-3 col-form-label">Enter Item Description</label> 
 
\t \t \t \t \t \t \t <div class="col-lg-8"> 
 
\t \t \t \t \t \t \t \t <textarea class="form-control" id="textareaItemDescription" rows="3" data-bind="value: newItemDescription"></textarea> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="form-group row"> 
 
\t \t \t \t \t \t \t <div class="col-sm-offset-3 col-sm-9"> 
 
\t \t \t \t \t \t \t \t <label class="custom-control custom-checkbox checkbox-inline no_indent" style="font-weight:bold;"> 
 
\t \t \t \t \t \t \t \t \t <input type="checkbox" class="custom-control-input" checked="checked" data-bind="checked: newItemEnabled"> 
 
\t \t \t \t \t \t \t \t \t <span class="custom-control-indicator"></span> 
 
\t \t \t \t \t \t \t \t \t <span class="custom-control-description" style="padding-bottom: 2px;">Enabled</span> 
 
\t \t \t \t \t \t \t \t </label> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <button type="button" class="btn btn-primary" id="back">Back</button> 
 
\t \t \t \t <div class="pull-right"> 
 
\t \t \t \t \t <button type="submit" class="btn btn-primary" id="next1">Next</button> 
 
\t \t \t \t </div> 
 
\t \t \t </form> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <ul data-bind="foreach: items, visible: items().length > 0"> 
 
\t \t <li> 
 
\t \t \t <input data-bind="value: itemname" style="color: black;" /> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <input data-bind="value: itemdescription" style="color: black;" /> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <input type="checkbox" data-bind="checked: itemenabled" /> 
 
\t \t </li> 
 
\t </ul> 
 
</div>

Answer 1

私は基本的な機能と一緒にページ番号を追跡するために新たなオブザーバブルを追加して、番号を増減すると、価格も追加された後に単純に追加します。

$(function() { 
 
    var main = new stuff(); 
 
    ko.applyBindings(main, $('#ko')[0]); 
 
}); 
 

 
function Item(data) { 
 
    this.itemname = ko.observable(data.itemname); 
 
    this.itemdescription = ko.observable(data.itemdescription); 
 
    this.itemenabled = ko.observable(data.itemenabled); 
 
    this.price = ko.observable(data.itemprice); 
 
} 
 

 
function stuff() { 
 
    var self = this; 
 

 
    self.items = ko.observableArray([]); 
 
    self.newItemName = ko.observable(); 
 
    self.newItemDescription = ko.observable(); 
 
    self.newItemEnabled = ko.observable(); 
 
    self.newItemPrice = ko.observable(); 
 
    self.page = ko.observable(1); 
 
    // Operations 
 
    self.next = function() { 
 
    if (self.page() === 2) { 
 
     self.addItem(); 
 
    } 
 
    self.page(self.page() + 1) 
 
    } 
 

 
    self.back = function() { 
 
    if (self.page() == 1) { 
 
     $("#panel1").hide(500); 
 
     $("#page1").hide(500); 
 
     $("#start").show(500); 
 
    } 
 
    self.page(self.page() - 1); 
 
    } 
 

 
    self.addItem = function() { 
 
    self.items.push(new Item({ 
 
     itemname: this.newItemName(), 
 
     itemdescription: this.newItemDescription(), 
 
     itemenabled: this.newItemEnabled(), 
 
     itemprice: this.newItemPrice(), 
 
    })); 
 
    }; 
 
}; 
 

 
//jquery stuff 
 
$('#start').on('click', function(e) { 
 
    $("#page1").show(500); 
 
    $('#panel1').css('visibility', 'visible').hide().fadeIn().removeClass('hidden'); 
 
    $("#start").hide(500); 
 
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<button type="submit" class="btn btn-primary" id="start">Start</button> 
 

 
<div id="ko"> 
 
    <div class="panel panel-default hidden" id="panel1"> 
 
    <div id="page1"> 
 
     <form data-bind="submit: next"> 
 
     <div class="panel panel-default" style="padding: 15px 0px 0px 0px;" id="panel2"> 
 
      <div class="container" data-bind="if: page() == 1"> 
 
      <div class="form-group row"> 
 
       <label for="inputItemName" class="col-lg-3 col-form-label">Enter Item Name</label> 
 
       <div class="col-lg-8"> 
 
       <input type="text" class="form-control form-control-lg" id="inputItemName" data-bind="value: newItemName" placeholder=""> 
 
       </div> 
 
      </div> 
 
      <div class="form-group row"> 
 
       <label for="textareaItemDescription" class="col-lg-3 col-form-label">Enter Item Description</label> 
 
       <div class="col-lg-8"> 
 
       <textarea class="form-control" id="textareaItemDescription" rows="3" data-bind="value: newItemDescription"></textarea> 
 
       </div> 
 
      </div> 
 
      <div class="form-group row"> 
 
       <div class="col-sm-offset-3 col-sm-9"> 
 
       <label class="custom-control custom-checkbox checkbox-inline no_indent" style="font-weight:bold;"> 
 
\t \t \t \t \t \t \t \t \t <input type="checkbox" class="custom-control-input" checked="checked" data-bind="checked: newItemEnabled"> 
 
\t \t \t \t \t \t \t \t \t <span class="custom-control-indicator"></span> 
 
\t \t \t \t \t \t \t \t \t <span class="custom-control-description" style="padding-bottom: 2px;">Enabled</span> 
 
\t \t \t \t \t \t \t \t </label> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="container" data-bind="if: page() == 2"> 
 
      <div class="form-group row"> 
 
      <label for="inputPrice" class="col-lg-3 col-form-label">Enter Price</label> 
 
      <div class="col-lg-8"> 
 
       <input type="text" class="form-control form-control-lg" id="inputPrice" data-bind="value: newItemPrice" placeholder=""> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <button type="button" data-bind="click: back" class="btn btn-primary" id="back">Back</button> 
 
     <div class="pull-right"> 
 
      <button type="submit" class="btn btn-primary" id="next1">Next</button> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 

 
    <ul data-bind="foreach: items, visible: items().length > 0"> 
 
    <li> 
 
     <input data-bind="value: itemname" style="color: black;" /> 
 
    </li> 
 
    <li> 
 
     <input data-bind="value: itemdescription" style="color: black;" /> 
 
    </li> 
 
    <li> 
 
     <label for="price">Price</label> 
 
     <input id="price" data-bind="value: price" style="color: black;" /> 
 
    </li> 
 
    <li> 
 
     <input type="checkbox" data-bind="checked: itemenabled" /> 
 
    </li> 
 
    </ul> 
 
</div>