剑道移动模板样式/格式不起作用
Posted
技术标签:
【中文标题】剑道移动模板样式/格式不起作用【英文标题】：Kendo mobile template styling/formatting not working 【发布时间】：2013-01-01 14:36:10 【问题描述】：我正在尝试使用如下所示的模板，结果是一个视图，其中包含模板中的所有元素在一行上，即使我正在使用
分隔元素。为什么这不能正确显示？似乎无论我做什么样式，它仍然以单行视图结束。
更新 罪魁祸首是剑道样式表——kendo.mobile.all.min.css——
所以剑道专家的新问题是，为什么剑道通过模板出现在列表视图中时处理输入字段的方式与出现在模板外部时不同？
列表视图模板之外的输入字段获取此类
.km-ios .km-list input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.k-input):not(.k-button), .km-ios .km-list select:not([multiple]), .km-ios .km-list .k-dropdown-wrap, .km-ios .km-list textarea
这导致没有奇怪的样式规则:) 普通文本字段视图
模板内的输入字段获取此类
.km-root input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.k-input):not(.k-button), .km-root select:not([multiple]), .km-root .k-dropdown, .km-root textarea
这导致将这些规则应用于它（使该字段位于一个奇怪的位置并松开所有正常的字段，即边框背景等）我不确定是哪个包装器导致了这种情况
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
font-size: 1.1rem;
color: #385487;
min-width: 6em;
border: 0;
padding: .4em;
outline: 0;
background:
transparent;
我的解决方法是为列表视图模板中的任何文本字段提供 class="k-input" 这显然将它们排除在上述 css 之外 -
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<!-- eventDetail view -------------------------------------------------------------------------------------------------->
<div data-role="view" id="view-eventDetail" data-show="getEventDetailData" data-title="eventDetail">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#view-myEvents">Back</a>
</div>
</header>
<form id="updateEventForm">
<div id="updateEvent">
<div id="eventDetail"></div>
<p>
<input type="button" id="eventUpdateCancelButton" style="width:30%" data-role="button" data-min="true" value="Back" />
<input type="submit" id="eventUpdateSaveButton" style="width:30%" data-role="button" data-min="true" value="Save" />
</p>
<div id="eventResult"></div>
</div>
</form>
</div>
<script id="eventDetail-template" type="text/x-kendo-template">
<p>
<input name="event_type" id="event_type" data-min="true" type="text" value="#= type #" />
</p>
<p>
<input name="event_loc" id="event_loc" data-min="true" type="text" value="#= type #" />
</p>
<p>
<input name="event_date_time" id="event_date_time" data-min="true" type="datetime" value="#= stamp #" />
</p>
<p>
Share this
<input data-role="switch" id="event_share" data-min="true" checked="checked" value="#= share #"/>
</p>
<input name="userID" id="userID" type="hidden" value="#= user_id #" />
<input name="eventID" id="eventID" type="hidden" value="#= event_id #" />
</script>
<script>
function getEventDetailData(e)
var dataSource = new kendo.data.DataSource(
transport:
read:
url: "http://localhost/mpt/website/api/event_details.php",
dataType: "jsonp",
type: "GET",
data: userID: e.view.params.user_id, eventID: e.view.params.event_id ,
cache: false
,
parameterMap: function(options)
return
userID: options.userID,
eventID: options.eventID
;
,
schema: // describe the result format
data: "results" // the data which the data source will be bound to is in the "results" field
);
console.log(e);
$("#eventDetail").kendoMobileListView(
dataSource: dataSource,
template: kendo.template($("#eventDetail-template").html())
).data("kendoMobileListView");
//update event
function sendUpdateEvent()
var siteURI = "http://localhost/mpt/website/api/update_event.php?";
app.showLoading();
var user_id = $('#userID').val();
var event_id = $('#eventID').val();
var event_type = $('#event_type').val();
var event_loc = $('#event_loc').val();
var event_date_time = $('#event_date_time').val();
var event_share = $('#event_share').val();
var formVals = 'eventID=' + event_id + '&userID=' + user_id + '&event_type=' + event_type + '&event_loc=' + event_loc + '&event_date_time=' + event_date_time + '&event_share=' + event_share;
var fullURI = siteURI + formVals;
$.ajax(
url: fullURI, dataType: 'json', success: function (data)
$('#eventResult').html(data.results);
app.hideLoading();
app.navigate("#view-myEvents");
);
$('#eventUpdateCancelButton').click(function ()
app.navigate("#view-myEvents");
);
$('#eventUpdateSaveButton').click(function ()
sendUpdateEvent();
);
$('#updateEventForm').submit(function ()
sendUpdateEvent();
return false;
);
</script>
【问题讨论】：
【参考方案1】：ListView 小部件应该应用于<ul> 元素。
尝试改变：
<div id="eventDetail"></div>
到：
<ul id="eventDetail"></ul>
还有这段代码：
$("#eventDetail").kendoMobileListView(
dataSource: dataSource,
template: kendo.template($("#eventDetail-template").html())
).data("kendoMobileListView");
最后的.data() 调用在这里没有做任何事情，可以删除，您也可以只传递文本字符串作为模板。你不需要自己打电话给kendo.template()。因此，您可以将其更改为：
$("#eventDetail").kendoMobileListView(
dataSource: dataSource,
template: $("#eventDetail-template").html()
);
【讨论】：
Listview 可以与 div 一起使用 - docs.kendoui.com/howto/howto-use-the-listview-of-kendo-ui-web - 最重要的是请参阅下面的答案 - 当它们是模板的一部分时，kendo 处理表单元素的方式似乎不同:) Listview 可以与 div 一起使用 - docs.kendoui.com/howto/howto-use-the-listview-of-kendo-ui-web - 最重要的是下面的链接 - 当它们是模板的一部分时，kendo 处理表单元素的方式似乎不同:) - 但我可以添加一个文本字段这个小提琴没有问题吗？ jsfiddle.net/jbristowe/3w7ru/light - 是造型吗？ 当我尝试.kendoMobileListView() 对抗 <div> 时，它生成了 HTML <div> <li></li> <li></li> </div> 而不是自动放入 <ul> 元素，但也许我刚刚在我的 jsFiddle 中搞砸了一些东西试过了。对不起！
不用担心 - 这是 jist - 在非剑道环境中运行上面的代码时 - 所有样式都很好 :) - 我不确定究竟是什么导致了样式问题 - 但是如果我删除我的项目中的 kendo 样式表 kendo.mobile.all.min.css - wammo - 样式符合预期...我将进行更多研究，但似乎 kendo 样式表处理模板的方式与处理模板的方式不同直视
@DropHit KendoUI 有两个名为 ListView 的 不同 小部件。移动 ListView 与 Web ListView 不同。正如 CodingWithSpike 所说，Mobile ListView 应该从 元素构建。您可以查看相应的帮助文章：docs.kendoui.com/getting-started/mobile/listview
以上是关于剑道移动模板样式/格式不起作用的主要内容，如果未能解决你的问题，请参考以下文章