JQM / knockoutJS component not data binding?
I have a simple popup that I want to use in components. It does not bind data in the popup, but in other parts of the components it does?
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>\
'
});
View
<div data-bind='component: { name: "customer-search"}'></div>
Just put this anywhere in the content
+3
source to share
1 answer
I found the answer after reading it many times.
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');
}
};
+2
source to share