Question

我必须在很多页面中显示模板。我正在尝试使用淘汰赛。

我有一个index.html文件，其中包含以下内容：

<head>
<script data-main="js/main" src="js/libs/require/require.js"></script>
</head>
<body>
  <header>
    <div id='div1' data-bind="template: {name: 'testTemplate'}"></div>
  </header>
 </body>

testTemplate.html如下：

<div>        
  <button data-bind="click:function(data){$root.test(data)}">Test</button>  
  <!-- ko foreach: globalNavItems -->           
  <p> <a data-bind="text: label, attr:{href: url}"> <span class=""></span> 
    </a></p>        
  <!-- /ko -->     
  </div>

我想在点击按钮Test时填充globalNavItems。我的main.js如下：

require(['knockout', 'jquery',  'text!../patterntemplates/testTemplate.html'],       
 function(ko, $, t0)        {          
   function headerViewModel() { 
   var self=this;   
   self.globalNavItems =ko.observableArray([]);                    



self.test = function(data){
         global_nav_dropdown_items =  
                                                                                             ko.observableArray([{"label":                                                                                   "preferences","url":"Menu.html"},                
 {"label": "help","url": "#"},                
 {"label": "about","url": "#"},
 {"label": "sign out","url": "#"}]);
        self.globalNavItems=global_nav_dropdown_items;
      }        


      }           
      oj.koStringTemplateEngine.install();           
      ko.templates["testTemplate"] = t0;           
      $(document).ready(function() {             
        ko.applyBindings(new headerViewModel(),                    
        document.getElementById('div1'));           
        });         
        });

我可以在运行index.html时看到按钮。单击该按钮时，也会调用方法测试，但不会填充globalNavItems，我看不到页面中显示的任何链接。

任何指针？

由于

Answer 1

这一行是有问题的：

self.globalNavItems=global_nav_dropdown_items;

通过运行此功能，您只需使用纯JavaScript代码替换已定义的observableArray，并且它不再绑定到该页面。您需要通过它的界面更新observable，而不是仅仅分配给变量：

self.globalNavItems(global_nav_dropdown_items);

填充KO Observable数组时出现问题

1 个答案: