【问题标题】:How to style jQuery Mobile content in a Knockout template?如何在 Knockout 模板中设置 jQuery Mobile 内容的样式?
【发布时间】:2011-10-01 04:02:59
【问题描述】:

我正在使用带有 jQ​​uery Mobile 的 KnockoutJS。但是,无论其数据角色如何,它似乎都没有为模板中的任何内容设置样式。我假设这是因为它将它作为 ajax 调用加载,并且将在 jQuery Mobile 完成其初始样式之后。

我的一些模板输入量很大,所以我读到你可以遍历每个元素并告诉 jQuery 将它们设置为相关类型,但肯定有办法获得它只是重做所有内容,还是一页?

【问题讨论】:

  • 我已经读到有一个 form.refresh() 方法即将推出,你知道这需要多长时间吗?还有什么方法可以推迟页面的 jquery 移动缓存。由于我的模板在加载后并没有真正改变,所以如果我可以延迟它直到所有模板都被加载,那么这将绕过我的问题......

标签: jquery jquery-mobile knockout.js


【解决方案1】:

根据您需要多久完成这项工作,我不会指望 form.refresh() 很快就会出现。来自jQuery Mobile Blog

我们正在为库添加一些令人兴奋的功能,包括更广泛的过渡支持、pushState 等。在短期内,我们计划在接下来的 2 周内发布 Beta 2 版本,以便在稳定版本中加入这些点击更改和其他改进,从而使发布速度开始变得更加频繁。

虽然 form.refresh() 可能会随 beta 2 一起发布,但至少还有两周时间。在那之前,最好的选择是遍历每个元素并调用 style 方法。您可以在此处获取元素样式列表:http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/forms/plugin-eventsmethods.html 只需不带参数调用它们即可强制使用 jQuery 移动样式。示例:$("input[type='number']").textinput();

另一种可行的方法(但可能只是作为最后的手段使用)是简单地对模板的 html 进行编码,以便元素已经被样式化为 jQuery 移动元素。也就是说,所有jQuery mobile添加的html,比如<span class="ui-btn-inner"><span class="ui-btn-text">,都放在自己里面。当然,这意味着您的模板最终会包含一堆额外的 html,并且使用起来可能会让人感到困惑,所以只有在必要时才这样做。

【讨论】:

  • 谢谢,已经看过这个页面,我也可以用 role="fieldcontain" 刷新元素,因为我也设置了一些内联角色,这是我无法找到如何刷新它们的地方... 2对我来说,Weeks 并不是世界末日,因为我现在只能处理垃圾风格。我想我大约一个月不会完成......
  • 应该能够使用role="fieldcontain" 刷新元素,前提是它们是表单元素并且您对其调用了正确的函数。
  • 此外,不能保证 form.refresh() 将处于 beta 2 中,所以在/除非它被正式宣布为即将推出的功能之前不要指望它。相信有人写了一个简单的 form.refresh 插件,发到 jQuery 移动论坛上,但是我现在找不到了,可能已经过时了。
  • 更新:来自最新的 jQuery Mobile 博客文章:jquerymobile.com/blog/2011/07/22/…,一旦他们发布 beta 2,您将能够触发将执行此功能的“创建”事件。这可能已经在最新的jqmobile。示例代码(来自博客):$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
  • 太棒了,当 beta 2 出来时会检查一下,如果可行,会给你答案。
【解决方案2】:

我将接受之前的答案,因为我提到的问题将由此解决。

但是!我实际遇到的问题是因为我在我的 javascript 包含中引用了 Qtip,并且由于某种原因导致添加的元素无法正确注入。即我的页脚导航栏没有收到注入锚等的跨度。

我删除它后,一切正常。

【讨论】:

    猜你喜欢
    • 2012-08-09
    • 2013-11-29
    • 2019-09-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多