입력 필드의 값을 observableArray에 추가하고 표시 (knockout.js)

이것은 knockout.js에서 처음 시도한 것입니다. 입력 필드가 있으며 입력 필드에 값을 입력하면 목록으로 전송되고 표시됩니다. 그러나 그것은 작동하지 않으며 this.prodname이 observableArray에 대한 correclty와 관련이 없다는 사실과 관련이 있다고 생각합니다. 그러나 나는 그것을하는 방법을 이해할 수 없다.입력 필드의 값을 observableArray에 추가하고 표시 (knockout.js)

내 코드 :

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript" src="jquery-1.10.2.min.js"></script> 
     <script type="text/javascript" src="knockout-3.0.0.js"></script> 
     <script type="text/javascript" src="app.js"></script> 
     <link rel="stylesheet" type="text/css" href="lt.css"/> 
     <title>eins</title> 
    </head> 
    <body> 
     <div id="main"> 
     <form data-bind="submit:addValues"> 
      <input type="text" data-bind="value:newprod, valueUpdate='afterkeydown'"></input> 
      <input type="text" data-bind="value:number,valueUpdate='afterkeydown'"></input> 
      <button type="submit">OK</button> 
     </form> 
      <ul data-bind="foreach:productname"> 
      <li data-bind="text : $index"></li> 
       <li data-bind="text:prodname"></li> 
       <li data-bind="text:anzahl"></li> 
      </ul> 
     </div> 
    </body> 
</html>

그리고 나도,이 시도

$(document).ready(function() { 

    var mymodel = function() { 

     this.newprod = ko.observable(""); 
     this.productname = ko.observableArray(""): 

     this.addValues = function() { 
      this.productname.push(this.newprod()); 
     }; 

    }; 
    ko.applyBindings(new mymodel()); 
});

app.js :

this.productname.push({newprod: this.newprod() });

을이 게시물 읽은 후 : 지금까지 https://stackoverflow.com/questions/19419438/adding-an-item-to-an-observablearray-in-knockoutjs-when-using-mapping

을 나는 알 수 있습니다, 내 코드는이 예제와 유사합니다 : http://knockoutjs.com/examples/betterList.html

그러나 observableArray를 미리 채우고 싶지 않습니다. 입력 필드에서 값을 가져 오려고합니다.

고맙습니다.

출처

2014-01-24 user2791739

당신은 그것을 이런 식으로 (see fiddle)

을 할 수

귀하의 코드 당신이, 당신이 대신 속성의 당신의 ViewModel (인스턴스)의 속성에 바인딩하려고했던했다 data-bind="foreach:productname" 목록에 있기 때문에 작동하지 않는/반복 할 배열의 관찰 가능 항목. data-bind="text:prodname"과 같은 몇 가지 다른 사항도 있지만 아직보기 모델의 어느 곳에서나 정의 된 prodname은 없습니다. 나는 그것을 당신을 위해 약간 청소했고, 당신이 당신의 필요를 충족시키기 위해이 코드를 적용 할 수 있기를 바랍니다.

var mymodel = function() { 
    var self = this; 
    self.newprod = ko.observable(); 
    self.anzahl = ko.observable(); 
    self.productname = ko.observableArray(); 

    self.addValues = function() { 
     self.productname.push(new product(self.newprod(), self.anzahl())); 

     // clear the input boxes for the next entry 
     self.newprod(''); 
     self.anzahl(''); 
    }; 
}; 

function product(name, anz){ 
    var self = this; 
    self.newproduct = ko.observable(name); 
    self.anzahl = ko.observable(anz); 
} 

ko.applyBindings(new mymodel());

과 HTML

<div id="main"> 
    <form data-bind="submit:addValues"> 
     <input type="text" data-bind="value:newprod"></input> 
     <input type="text" data-bind="value:anzahl"></input> 
     <button type="submit">OK</button> 
    </form> 
    <ul data-bind="foreach:productname"> 
     <li data-bind="text: $index() + 1"></li> 
     <li data-bind="text: newproduct"></li> 
     <li data-bind="text: anzahl"></li> 
    </ul> 
</div>

출처

2014-01-24 14:11:47 rwisch45

아은, 무사, 지금 나는 그것을 볼 ... 푸쉬 방식으로 새로운 개체를 전달해야합니다. 고맙습니다. – user2791739

입력 필드의 값을 observableArray에 추가하고 표시 (knockout.js)

답변

관련 문제