परिवर्तन पर सूची दृश्य को स्वचालित रूप से रीफ्रेश करें - नॉकआउटजे और JQuery मोबाइल

Question

मैं jQuery मोबाइल के साथ knockoutjs (बहुत नया) का उपयोग कर रहा हूं। मेरे पास एक सूचीदृश्य है जिसे मैंने फ़िल्टर किए गए परिणामों को बाध्य किया है। मैं पहली बार मेरी डेटा लोड करने के बाद मैं क्रम में

$('ul').listview('refresh'); 

कॉल करने के लिए JQM मेरी सूची में restyle करने के लिए है, इस महान काम करता है।

हालांकि जब मैं अपनी सूची फ़िल्टर करता हूं, तो इसे फिर से प्रस्तुत किया जाता है और शैली को फिर से खो देता है और मैं यह नहीं समझ सकता कि फिर से ताज़ा कहां कॉल करें।

मेरे एचटीएमएल इस प्रकार है:

<p>Filter: <input data-bind="value: filter, valueUpdate: 'afterkeydown'" /></p> 
    <ul data-role="listview" data-theme="g" data-bind="template: {name: 'myTemplate', foreach: filteredItems }" /> 

मेरे नॉकआउट जेएस है:

var car = function (name, make, year) { 
    this.name = name; 
    this.make = make; 
    this.year = year; 
} 

var carsViewModel = { 
    cars: ko.observableArray([]), 
    filter: ko.observable() 
}; 

//filter the items using the filter text 
carsViewModel.filteredItems = ko.dependentObservable(function() { 
    var filter = this.filter(); 
    if (!filter) { 
     return this.cars(); 
    } else { 
     return ko.utils.arrayFilter(this.cars(), function (item) { 
      return item.make == filter; 
     }); 
    } 
}, carsViewModel); 

function init() { 
    carsViewModel.cars.push(new car("car1", "bmw", 2000)); 
    carsViewModel.cars.push(new car("car2", "bmw", 2000)); 
    carsViewModel.cars.push(new car("car3", "toyota", 2000)); 
    carsViewModel.cars.push(new car("car4", "toyota", 2000)); 
    carsViewModel.cars.push(new car("car5", "toyota", 2000));   
    ko.applyBindings(carsViewModel); 
    //refresh the list to reapply the styles 
    $('ul').listview('refresh'); 
} 

मुझे यकीन है कि बहुत मूर्खतापूर्ण है कि मैं याद आ रही है कुछ है कि वहाँ हूँ ...

धन्यवाद आप अपने समय के लिए।

Answer 1

यह समस्या कुछ बार केओ मंचों पर आई है।

एक विकल्प बाध्यकारी बनाना है जो आपके filteredItems से जुड़ा हुआ है और सूचीदृश्य रीफ्रेश चलाता है।

यह दिखाई दे सकता है जैसे:

ko.bindingHandlers.jqmRefreshList = { 
    update: function(element, valueAccessor) { 
     ko.utils.unwrapObservable(valueAccessor()); //just to create a dependency 
     $(element).listview("refresh"); 
    } 
    }; 

अब, आप कंटेनर पर इस जगह हैं (या वास्तव में किसी भी तत्व पर) और नमूदार में पारित है कि आप इसे पसंद पर निर्भर हैं:

<ul data-bind="jqmRefreshList: filteredItems"></ul> 

Answer 2

क्या आप पूरे कामकाजी कोड को jsfiddle पर पोस्ट कर सकते हैं? क्योंकि मुझे एक ही समस्या है और मैंने आपके समाधान की कोशिश की लेकिन यह अभी भी काम नहीं कर रहा है।

[संपादित करें]: पिछले दो जवाब पर

ko.bindingHandlers.jqmRefreshList = { 
    update: function (element, valueAccessor) { 

     ko.utils.unwrapObservable(valueAccessor()); //just to create a dependency 
     setTimeout(function() { //To make sure the refresh fires after the DOM is updated 
      $(element).listview(); 
      $(element).listview('refresh'); 
     }, 0); 
    } 
}; 

Answer 3

भवन, यहाँ थोड़ा और पूरा कुछ है: ठीक है, यह ठीक मेरे लिए इस तरह से काम किया। यह (अर्थात् टिप्पणियों के भीतर foreach) आप बाध्यकारी containerless उपयोग करने के लिए अनुमति देता है, और तलवों ताज़ा के मुद्दे बल्कि एक समय समाप्ति से अपवाद से निपटने के द्वारा के बाद jQM पेज जीवन चक्र निकाले जाने:

ko.virtualElements.allowedBindings.updateListviewOnChange = true; 
ko.bindingHandlers.updateListviewOnChange = { 
    update: function (element, valueAccessor) { 
    ko.utils.unwrapObservable(valueAccessor()); //grab dependency 

    var listview = $(element).parents() 
          .andSelf() 
          .filter("[data-role='listview']"); 

    if (listview) { 
     try { 
     $(listview).listview('refresh'); 
     } catch (e) { 
     // if the listview is not initialised, the above call with throw an exception 
     // there doe snot appear to be any way to easily test for this state, so 
     // we just swallow the exception here. 
     } 
    } 
    } 
}; 

वहाँ एक complete worked example up on my blog है। उम्मीद है की वो मदद करदे!