Question

这是我第一次尝试敲门.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>

和app.js

$(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());
});

我也尝试了这个：

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预先填充。我希望值来自输入字段。

Thanx为你提供帮助！

Answer 1

你可以这样做（see fiddle）

您的代码无效，因为在您拥有的data-bind="foreach:productname"列表中，您尝试绑定到viewmodel的属性（一个实例），而不是要迭代的数组的属性/ observable 。还有一些其他的东西，比如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>

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

1 个答案: