Question

我从加载的列表中获取一些数据并将它们添加到可观察数组中，我想将它们显示在另一个列表中，除了屏幕上没有显示数据外，一切都会进行这是代码

＆＃13;

 self.addData = function (val) {
        
        self.finalList().push(val);

        alert(val.LATIN_DESC);

    }

＆＃13;

   <div class="container">
                            <h2> Added servcies</h2>
                            <div class="row" style="height:20vh; overflow:auto;">
                                <div class="col-md-3">
                                    <ul data-bind="foreach:finalList">
                                        <li class="list-group-item">
                                            <div class="col-xs-3">
                                                <b data-bind="text:LATIN_DESC , value: SYS_KEY"></b>
                                            </div>
                                        </li>
                                    </ul>
                                    
                                </div>
                            </div>
                         
                        </div>

＆＃13;

Answer 1

self.finalList()返回observable array当前包含的内容，然后self.finalList().push(val)将值推送到返回的结果（使用Javascript的本机Array.Prototype.push()方法），而不是可观察数组本身。改为使用Knockout observable array的push方法：

self.finalList.push(val)。

Answer 2

正是关于observableArray的@connexo，以及绑定b元素时，使用text而不是value是有意义的，因为b元素不会设置更改值。

＆＃13;

 
 function TestVM (){
   var self = this;
   self.finalList = ko.observableArray();
    self.addData = function (val) {
        
        self.finalList.push(val);

        alert(val.LATIN_DESC);

    }
    
    self.addData({LATIN_DESC: 'RR', SYS_KEY: 'GG'});
 }
 
 ko.applyBindings(new TestVM())

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="container">
                            <h2> Added servcies</h2>
                            <div class="row" style="height:20vh; overflow:auto;">
                                <div class="col-md-3">
                                    <ul data-bind="foreach:finalList">
                                        <li class="list-group-item">
                                            <div class="col-xs-3">
                                                <b data-bind="text:LATIN_DESC +'-'+ SYS_KEY"></b>
                                            </div>
                                        </li>
                                    </ul>
                                    
                                </div>
                            </div>
                         
                        </div>

＆＃13;

可观察数组中的项目未添加到列表KO中

2 个答案: