HTML을 동적 콘텐츠

Question

에 바인딩 나는 다음과 같은 마크 업이 : 내가보기에 viewModel 자바 스크립트 객체를 바인딩 KnockoutJS을 사용하고

<div id="metro-hub"> 
    <h1 id="hub-title" data-bind="text: hubTitle" class="hub-title">@Model.HubTitle</h1> 
    <div id="hubWrapper" data-root-url="/Root" data-bind="html: currentHub"></div> 
</div> 

. 또한 서버의 사이트 맵에 네비게이션을 연결하는 맞춤 바인딩을 만들었습니다.

ko.bindingHandlers.metroHub = { 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var menuItems = $(element).find('li'); 
     Sammy(function() { 
      var $this = this; 
      menuItems.each(function (index, elem) { 
       $this.get('#/' + $(elem).data('link-name'), function() { 
        var numChildren = $(elem).data('num-children'); 
        if (numChildren > 0) { 
         var rootUrl = (elem).data('source-url'); 
         viewModel.renderHub(rootUrl); 
        } else { 
         var dataSource = $(elem).data('source-url'); 
         $.ajax({ 
          url: dataSource, 
          type: 'get', 
          success: function (data) { 
           if (data) { 
            viewModel.viewPortData(data); 
           } 
          } 
         }); 
        } 
       }); 
      }); 
      var firstItem = menuItems[0]; 
      var itemRoute = '#/' + $(firstItem).data('link-name'); 
      $this.get('', function() { this.app.runRoute('get', itemRoute) }); 
     }).run(); 
    } 
}; 

데이터 :

var MetroPageViewModel = function() { 
    var self = this; 

    self.currentHub = ko.observable(); 
    self.viewPortData = ko.observable(); 
    self.hubTitle = ko.observable(); 

    self.renderHub = function (rootUrl) { 
     console.log(rootUrl); 
     $.ajax({ 
      url: '/Base/NewHub', 
      type: 'get', 
      data: { 
       url: rootUrl 
      }, 
      success: function (data) { 
       if (data) { 
        var wrappedData = $(data); 
        var newHubContent = wrappedData.find('ul'); 
        var title = wrappedData.find('input.metro-hub-title').val(); 
        self.hubTitle(title); 
        self.currentHub(newHubContent); //THIS IS THE LINE THAT DOES NOT WORK 
       } 
      } 
     }); 
    }; 

    self.initialize = function() { 
     var url = $('#hubWrapper').data('root-url'); 
     self.renderHub(url); 
    }; 
}; 

$(function() { 
    var viewModel = new MetroPageViewModel(); 
    ko.applyBindings(viewModel); 
    viewModel.initialize(); 
}); 

그리고 여기에이 URL의 해시 기반 라우팅을 수행 할 Sammy.js 라이브러리를 사용하여 바인딩 정의 것 : 아래는 내가 지금까지 알아 낸 일부 조각은 다음과 같이 서버에서 반환은 다음과 같습니다

<div><ul class="metro-menu" data-bind="metroHub: true"><li data-link-name="Home" data-num-children="0" data-source-url="/Navigation/Item1"><a href="#/Home">Home</a></li><li data-link-name="Products" data-num-children="2" data-source-url="/Navigation/Item2"><a href="#/Products">Products</a></li><li data-link-name="Services" data-num-children="0" data-source-url="/Navigation/Item3"><a href="#/Services">Services</a></li></ul> 
<input class="metro-hub-title" type="hidden" value="this is a hub title"></input> 
<input class="hasParentNode" type="hidden" value="False"></input> 
</div> 

UPDATE :

,

이제 renderHub() 메서드의 AJAX 콜백이 반환되면 사용자 지정 바인딩 update 콜백이 트리거되지 않는 것이 문제입니다. 바인딩 또는 아무것도 강제로 어떤 메서드를 호출해야합니까?

의견이 있으십니까?

Answer 1

아마도 상위 컨테이너에 업데이트 바인딩을 배치해야합니다. 컨트롤이 업데이트되고 있기 때문입니다.

업데이트에 반응해야하는 이전 div가 완전히 새로운 html로 대체 되었기 때문에 업데이트가 실행되지 않는다고 생각합니다.

업데이트와 동일한 코드로 바인딩에 초기화 함수를 작성하여 신속하게 확인할 수 있습니다.