Question

嗨我是KnockOut的新手，并尝试用它做一些简单的代码，但我在div中显示我的可观察数组项有问题，看起来很简单，我使用F12并跟踪我的数组，我的添加函数是工作，但我不知道为什么我不能在div中显示数组项目，谢谢你的帮助。

这是我的代码：view

    <div class="panel panel-info">
       <div class="panel-body">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Enter Items Here" data-bind='value:items, valuupdate:"afterkeydown"'>
          <span class="input-group">
              <button class="btn btn-info" data-bind="click:add">ADD</button> 
          </span>
       </div>
    </div>
    <div class="panel-footer">
        <label>Your Items</label>
        <div  data-bind="foreach:addeditems">
            <span data-bind="text:$data"></span>
            <span data-bind="text:addeditems().length"></span>
        </div>

        <!--<textarea class="form-control" rows="5" data-bind="text:addeditems"></textarea>-->
    </div>
    <div data-bind="visible:addeditems().length>0">golnaz</div>
</div>

这是我的viewModel：

 define(['services/logger'], function (logger) {
    var title = 'AddItems';
    var items = ko.observable("");
    var addeditems = ko.observableArray("");
    var add = function () {
        return addeditems().push(items());
    };

    var vm = {
        activate: activate,
        title: title,
        items: items,
        addeditems: addeditems,
        add:add
    };

    return vm;

    //#region Internal Methods
    function activate() {
        logger.log(title + ' View Activated', null, title, true);
        return true;
    }
    //#endregion
});

但是我看不到项目甚至数组的长度。谢谢你的帮助。

Answer 1

调用add时不要获取底层数组。

var add = function () {
    return addeditems.push(items());
};

也不要在你看来这样做。

Answer 2

addeditems()不属于＆＃34;添加项目＆＃34;。您处于一个范围为addeditems的循环中。请尝试使用$root.addeditems().length。请注意，这将显示数组中每个元素的整个数组的长度。

此外，您可能还想重新考虑VM初始化：

var addeditems = ko.observableArray("")应为var addeditems = ko.observableArray([])。 observableArray的默认值应该是空数组，而不是空字符串

无法在<div>中显示可观察数组的项目

2 个答案: