如何让用户将数据输入observabaleArrays

时间:2017-06-02 23:22:49

标签: knockout.js

我正在尝试创建一个购物清单,用户也可以在其中输入商品和数量。我在列表中添加了几个项目(在代码中),但我希望用户使用'ADD'按钮来添加内容。

在用户点击添加时,添加了“新4”。我希望用户输入此数据。我不确定如何让用户输入数据到observabaleArrays。

我是Knockout.js的新手,我无法找到解决方法。

<table>
    <thead>
        <tr> Item </tr>
        <tr> Quantity </tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr>
            <td data-bind="text:item"></td>
            <td data-bind="text:quantity"></td>
        </tr>
    </tbody>
</table>

<button data-bind="click: addItem"> ADD </button> 

<script>

    function appViewModel(){
            var self = this;


        self.items = ko.observableArray([
            {
                item: 'Carrot',
                quantity : '1'
            },
            {
                item: 'Milk',
                quantity : '2'
            },
            {
                item: 'Bread',
                quantity : '3'
            }
        ]);

        self.addItem = function(){
            self.items.push({item: 'New', quantity: '4'});
        }   
    }

    ko.applyBindings(new appViewModel());
</script>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
MYCLASS::MYCLASS(double deltaT, double q_var, double r1_var, double r2_var)
                : x(4), A(2,2) { // use initializer list to construct x and A
    x << q_var, r1_var, r2_var, 0.0;
    A << deltaT, 0.0, 0.0, 0.0;
}
&#13;
function item(item, quantity) {
  var self = this;
  this.item = ko.observable(item);
  this.quantity = ko.observable(quantity)
  
}

function viewModel() {
  var self = this;
  this.item = ko.observable('');
  this.quantity = ko.observable('');
  this.items = ko.observableArray([
    new item('carrot', 1),
    new item('milk', 2),
    new item('bread', 3),
  ]);
  this.add = function(){
    self.items.push(new item(self.item(), self.quantity()))
  }
}

var vm = new viewModel();
$(document).ready(function() {
  ko.applyBindings(vm);
})
&#13;
&#13;
&#13;