JQM/нокаутJS компонент popup не связывает данные?

Question

У меня есть простое всплывающее окно, которое я хочу использовать в компонентах. Он не связывает данные во всплывающем окне, а в других частях компонентов, которые он делает?

ViewModel

ko.components.register('customer-search', { 
    viewModel: function(){ 
    var self = this; 
    //data 
    self.search= ko.observable(); 
    self.list= ko.observableArray([{supCode:"CHO024",supName:"supplier"}]); 
    self.next= ko.observable(); 
    self.prev= ko.observable(); 
    self.testText= ko.observable('test'); 
    //general vars 


    ko.bindingHandlers.applyJQueryMobileStuff = { 
     init: function(elem) { 
      $(elem).trigger("create"); 
     } 
    } 
    }, 
    template: 
     '<div class="customer-search" data-bind="applyJQueryMobileStuff: true">\ 
     <input type="text" data-bind="value: testText"/><br>\ 
     \ 
     <a href="#popupSearch1" data-rel="popup" data-position-to="window" data-role="button" data-transition="slideup" id="test" data-dismissible="false">Choose Customer</a>\ 
     <div data-role="popup" id="popupSearch1" data-overlay-theme="d" data-theme="a" class="ui-corner-all" style="max-width:600px;">\ 
     <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>\ 
      <div data-role="header" data-theme="b" class="ui-corner-top">\ 
       <h4>Customer Search</h4>\ 
      </div>\ 
      <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">\ 
      <input type="text" name="searchSupplier" placeholder="Customer Name" data-bind="value: testText"/>\ 
      </div>\ 
     </div>\ 
    <\div>\ 

     ' 
}); 

вид

<div data-bind='component: { name: "customer-search"}'></div> 

Просто поместите это в какой-либо части содержания

Answer 1

Я нашел ответ после многих и многих чтения.

ko.bindingHandlers.applyJQueryMobileStuff = { //refresh component to load with jqm fromat 
     init: function(elem, valueAccessor, allBindingsAccessor, data, context) { 
      //init logic 
     // Make a modified binding context, with a extra properties, and apply it to descendant elements 
     var innerBindingContext = context.extend(valueAccessor); 
     ko.applyBindingsToDescendants(innerBindingContext, elem); 
     $(elem).trigger("create"); 
     // Also tell KO *not* to bind the descendants itself, otherwise they will be bound twice 
     return { controlsDescendantBindings: true }; 
      //doesn't bind data to popup??? 
     }, 
     update: function(elem){ 
      //update logic 
      alert('update bind'); 
     } 
    }; 

Creating custom bindings that control descendant bindings