在子jQuery移动页面中初始化knockoutjs内容

Question

我知道有很多问题涉及 jquery mobile / knockoutjs 集成，但是我找不到解决我问题的线程。我有一个包含子视图模型的主视图模型，因此我在页面加载时对其进行初始化，因为该事件仅在应用程序加载时触发：

var viewModel = null;

$(function () {
    console.debug("running init");
    viewModel = new ViewModel();
    ko.applyBindings(viewModel);
});

这在我的应用程序的第一页上效果很好，但是当我转到子页面时，knockoutjs 内容没有显示，因为 jquery mobile 已经动态加载了 html，并且 knockout 不知道更新绑定的内容.我试图通过使用$(document).delegate 函数告诉它动态更新，但是我正在努力解决它应该如何实现。

<ul id="speeding" data-role="listview" data-bind="foreach: speeding.items">
    <li>
        <h3 class="ui-li-heading" data-bind="text: Address"></h3>
        <p class="ui-li-desc" data-bind="text: Address2"></p>
        <p class="ui-li-desc" data-bind="text: PrettyDate"></p>
        <p class="ui-li-aside" data-bind="text: SpeedMph"></p>
    </li>

    <script type="text/javascript">
        var loaded = false;
        $(document).delegate("#page-speeding", "pagebeforecreate", function () {
            if (!loaded) {
                loaded = true;
                ko.applyBindings(viewModel);
            }
            else {
                $("#speeding").trigger("refresh");
            }
        });
    </script>
</ul>

我将委托函数放在它被调用的页面中，显然这是使用委托的要求。然后在第一次加载这个子页面时，我调用 ko.applyBindings （我只想在应用程序加载时调用它，但我无法让 trigger("create") 工作。在随后的调用中，它会调用 trigger("refresh") （这对我不起作用。）但问题是每次我转到子页面时都会添加委托函数。所以在第一次加载子页面时，它会调用一次委托回调函数。如果我去回到主页面，再回到子页面，会调用两次委托回调，以此类推。

有人可以提供关于刷新子页面上的 knockoutjs 绑定的推荐方法的指导吗？

Answer 1

这就是最终为我工作的原因。我不知道是否有更好的方法......

var viewModel = null;

$(function () {
    console.debug("running init");
    viewModel = new ViewModel();
    ko.applyBindings(viewModel);

    var pages = [
        "scorecard", "speeding", "leaderboard"
    ];
    _.each(pages, function (page) {
        $(document).on("pagebeforecreate", "#page-" + page, function () {
            console.debug("applying " + page + " bindings");
            ko.applyBindings(viewModel, $("#page-" + page)[0]);
        });
    });
});