jquery-mobile - JQM/knockoutJS 组件弹窗不绑定(bind)数据？

Question

我有一个简单的弹出窗口，我想在组件中使用它。它不绑定(bind)弹出窗口上的数据，但它绑定(bind)组件的其他部分？

View 模型

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