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

Posted 2023-03-27

【中文标题】在子jQuery移动页面中初始化knockoutjs内容

【英文标题】：Initializing knockoutjs content in child jquery mobile page

【发布时间】：2013-04-30 14:48:19

【问题描述】：

我知道有很多问题涉及 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 绑定的推荐方法的指导吗？

【问题讨论】：

我在使用 jQM 时遇到了很多问题，最终根本没有使用它。但是我通过为每个页面分配一个 id 并将 dom 元素作为参数传递给敲除解决了这个特定点，例如ko.applyBindings(viewModel, $("#mypage div:jqmData(role='content')[0])。 ***.com/questions/7342814/…

首先，使用$('#speeding').listview('refresh')并将.delegate替换为.on

@Omar - 如果我这样做 $(document).on("#page-speeding", "pagebeforecreate", function () );然后根本不调用该函数...

@jgillich - 感谢您的回复，但您在应用绑定时没有说清楚。您是在第一次加载时应用每个元素 id 的绑定，就像我在上面所做的那样（减去每个元素 id），还是使用 $(document).delegate 以某种没有我提到的问题的方式进行上面？

试试这个$(document).on('pagebeforeshow', '#page-speeding', function ()

【参考方案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]);
        );
    );
);

【讨论】：

这正是我使用的。我在这个主题上做了很多搜索并阅读了无数的论坛帖子 - 没有更好的方法。他们制作了一个 JavaScript 框架，在 JavaScript 繁重的应用程序中效果不佳......