jquery-mobile - 淘汰可观察数组有界列表视图不会在 JQM 中呈现

Question

JQM 列表视图与数据一样填充，没有预期的问题，但我无法使用 JQM 样式呈现它。任何人都可以帮助我解决这个问题。

我试过 listview(), listview("refresh"), trigger("create") 他们都没有工作

var ProfessionsModel = function() {
    var self = this;
    self.professionDetails = ko.observableArray([]);
    self.getProfessionDetails=function(){
        var rest = new RestService('${pageContext.request.contextPath}/rest/profession/designations');
        rest.findAll(function(data) {
            $.each(data, function(index, value){
                self.professionDetails.push(value);
            });
        });
    };

    self.removeProfessionDetails= function(){
        self.professionDetails.removeAll();
    };

};

var pm = new ProfessionsModel();

$('#profession').live('pagecreate', function(event) {
    ko.applyBindings(pm, this);
});

$('#profession').live('pagebeforeshow', function(event) {
    pm.removeProfessionDetails();
});

$('#profession').live('pageshow', function(event) {
    pm.getProfessionDetails();
    $('#profession').find("ul").listview();
    $('#profession').find("ul").listview("refresh");
});

Answer 1

你在错误的时刻做这件事。您想相信 jQM 对正确时机的挑剔。

var ProfessionsModel = function() {
    var self = this;
    self.professionDetails = ko.observableArray([]);
    self.getProfessionDetails=function(){
        var rest = new RestService('${pageContext.request.contextPath}/rest/profession/designations');
        rest.findAll(function(data) {
            $.each(data, function(index, value){
                self.professionDetails.push(value);
            });
            $('#profession').find("ul").listview();
            $('#profession').find("ul").listview("refresh");                
        });
    };

    self.removeProfessionDetails= function(){
        self.professionDetails.removeAll();
    };

};

如果在追加内容后不执行 jQM 触发器刷新，则会停止，因此在 $.each 部分之后刷新。