将输入字段中的值添加到ObservalArray并显示它（knockout.js）_Knockout.js_Ko.observablearray

将输入字段中的值添加到ObservalArray并显示它（knockout.js）

knockout.js

将输入字段中的值添加到ObservalArray并显示它（knockout.js）,knockout.js,ko.observablearray,Knockout.js,Ko.observablearray,这是我第一次尝试使用knockout.js。有一个输入字段，您写入其中的值将“发送”到列表并显示。但是，它不起作用，我想这与this.prodname与observableArray没有正确关联这一事实有关。但我不知道怎么做我的代码： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-1.10.2.min.js"></sc

这是我第一次尝试使用knockout.js。有一个输入字段，您写入其中的值将“发送”到列表并显示。但是，它不起作用，我想这与this.prodname与observableArray没有正确关联这一事实有关。但我不知道怎么做

我的代码：

<!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>

我也试过这个：

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

读完这篇文章：

据我所知，我的代码类似于以下示例：

但是，我不希望observableArray被预先填充。我希望这些值来自输入字段

谢谢你的帮助

你可以这样做（）

您的代码不起作用，因为在您拥有的

data bind=“foreach:productname”

列表中，您试图绑定到viewmodel（一个实例）的属性，而不是要迭代的数组的属性/可观察项。还有一些其他内容，如

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>


好啊

Ahh，好吧，我需要在push方法中传递一个新对象。。。现在我明白了。太多了！！

<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>