2014-10-06 5 views
0

많은 페이지에 템플릿을 표시해야합니다. 내가 녹아웃을 사용하려고합니다. 다음과 같이KO 관찰 가능 배열 채우기 문제

<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> 

내가 globalNavItems 버튼 시험의 클릭에 채워야 할

나는 다음과 같은 내용으로 index.html 파일이 있습니다.

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을 실행하는 동안의 버튼을 볼 수 있습니다 다음과 같이 내 main.js이다. 버튼을 클릭하면 메소드 테스트도 호출되지만 globalNavItems가 채워지지 않아 내 페이지에 표시된 링크를 볼 수 없습니다.

포인터가 있습니까?

감사

답변

0

이 줄은 문제가 하나입니다

self.globalNavItems=global_nav_dropdown_items; 

이 실행함으로써, 당신은 그냥 일반 자바 스크립트 배열 observableArray을 정의 대체하지 않습니다하고, 그것은 더 이상 페이지에 바인딩합니다. 당신은 오히려 그냥 변수에 할당하는 것보다, 인터페이스의를 통해 관찰을 업데이트해야합니다

self.globalNavItems(global_nav_dropdown_items); 
+0

예, 작동하지만 내가 관찰 배열을 일반 배열로 global_nav_dropdown_items을 정의했다하지. 예제에서와 같이 global_nav_dropdown_items를 ko 관찰 가능 배열로 정의하면 self.globalNavItems (global_nav_dropdown_items); 작동하지 않습니다. – user3792795

+0

아, 미안 해요 - 정의가 측면에서 스크롤 된 것처럼 그리워했습니다 :) 예 - 이것은 전달되는 일반 배열 일뿐입니다. 똑같은 방식으로 적용됩니다 .- 'self.globalNavItems'에 새로운 것을 지정하자마자 더 이상 페이지가 원래 바인딩 된 관찰 가능하지 않기 때문에 바인딩이 변경 사항을 인식하지 못합니다. 그건 녹아웃과 함께 볼 일이야 - 당신이 관찰 할 수 있어야 무언가에 할당 찾으십시오, 그것은 _probably_ 잘못이야 :) –

+0

설명 주셔서 감사합니다. – user3792795

관련 문제