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（“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]);
        });
    });
});

初始化子jquery移动页面中的knockoutjs内容

1 个答案: