如何使用 Knockout 和 Upshot 对 JQuery Mobile 进行数据绑定答案

【问题标题】：How to databind JQuery Mobile with Knockout and Upshot如何使用 Knockout 和 Upshot 对 JQuery Mobile 进行数据绑定
【发布时间】：2012-04-08 02:49:51
【问题描述】：

我正在尝试构建一个 JQuery Mobile UI，它使用 upshot 从服务中获取数据，然后使用 Knockout.js 将值绑定到列表。我能够填充数据，但是 JQuery 移动样式没有得到呈现。

这是我的代码。非常感谢这方面的任何帮助。

<h2>Projects (<span data-bind="text: projects().length"></span>)</h2>

<ul data-inset="true" data-bind="foreach: projects" data-role="listview" data-theme="e" data-dividertheme="c" data-filter="true"> 
    <li>
            <a href="#" data-bind="text: ProjectName"></a>
            Project Type : <label data-bind="text: ProjectType"></label>
            Description : <label data-bind="text: Description"></label>
    </li> 
</ul>       
<p></p>

@(Html.UpshotContext(bufferChanges: true).DataSource<ProjectServiceController>(x => x.GetProjects()))

<script type="text/javascript">
    $(function () {
        var dataSource = upshot.dataSources.Projects.refresh();
        var ProjectsViewModel = {
            projects: dataSource.getEntities()
        };

        ko.applyBindings(ProjectsViewModel);        
    });

</script>

【问题讨论】：

标签： jquery-mobile knockout.js upshot

【解决方案1】：

refresh() 调用是异步的，因此您可以提供一个在刷新后执行的回调函数。 jQueryMobile 文档说，如果您添加项目，则需要在创建项目后刷新列表视图：http://jquerymobile.com/demos/1.0.1/docs/lists/docs-lists.html

下面是一个示例，说明您可以如何做到这一点：

var dataSource = upshot.dataSources.Projects.refresh(function() {
    $("ul").listview('refresh');
});

【讨论】：