Question

我正在试验在Meteor项目中运行的jquery-mobile。我有一个简单的列表，我将每个列表项目滑动过渡到其详细信息。虽然jquery-mobile本身看起来非常简单，但是我很难让它与Meteor一起使用，大概是因为组件的反射性是它们的渲染。

我已经尝试构建一个renderMe函数来处理反应，但我不知道如何从会话中获取当前的requestPage以便我可以初始化它。有什么建议吗？

以下是我对HTML的看法：

<body>
<!-- Start of first page -->
<div data-role="page" data-theme="b" id="listview-page">

    <div data-role="header" data-position="fixed">
        <h1>Mobile Requests</h1>
    </div>
    <!-- /header -->

    <div data-role="content" >
        {{>requests}}
    </div>

    <div data-role="footer" data-position="fixed">
        <h6>(c) 2014</h6>
    </div>
    <!-- /footer -->
</div>
<!-- Start of second page -->
<div data-role="page" data-theme="b" id="listdetail-page">

    <div data-role="header" data-position="fixed">
        <h1>Mobile Approvals</h1>
    </div>
    <!-- /header -->

    <div data-role="content" >
        {{>requestDetails}}
    </div>

    <div data-role="footer" data-position="fixed">
        <h6>(c) 2014</h6>
    </div>
    <!-- /footer -->
</div>
</body>

<template name="addRequest">

    Requested For: <input type="text" name="reqFor" id="reqFor"/>
    Requested Item: <input type="text" name="reqItem" id="reqItem"/>
    <input type="button" class="btn-info add-request" value="Add Request"/>

</template>

<template name="requests">
    <div id="listview-content">
    <ul id="listv" data-role="listview" data-autodividers="false" data-filter="true" data-inset="true">
    {{#each items}}
        <li><a href="#listdetail-page" data-transition="slide">{{RequestedFor}}</br><span class="small">Requested a new {{RequestedItem}} on {{formatDate dateSubmitted "short"}}</span></a>
        </li>
    {{/each}}
    </ul></div>
</template>


<template name="requestDetails">
    <div>
        {{RequestedFor}}</br><span class="small">Requested a new {{RequestedItem}} on {{formatDate dateSubmitted "short"}}</span>
    </div>
</template>

以下是我在client.js文件中的内容：

Requests = new Meteor.Collection("requests");

Template.requests.items = function(){
    var reqs = Requests.find({},{sort:{'dateSubmitted':-1}});
    return reqs;
};

Template.addRequest.events({
    'click input.add-request' : function(event){
        event.preventDefault();
        var requestedFor = document.getElementById("reqFor").value;
        var requestedItem = document.getElementById("reqItem").value;
        Meteor.call("addRequest",requestedFor, requestedItem, function(error , reqId){
            console.log('added request with Id .. '+reqId);
        });
        document.getElementById("reqFor").value = "";
        document.getElementById("reqItem").value = "";
    }
});

var renderMe = function () {
    var requestPage = Session.get('request');
    var initPage = function (el) {
        if (el) {
            $(el).trigger('create');
        }
    };

    initPage(requestPage);

    if (!this.isRendered) {
        initPage(requestPage);

        this.isRendered = true;
    } else {
        if ($(".ui-listview")) {
            $(".ui-listview").listview("refresh");
        }
    }
};

Template['requests'].rendered = _.wrap(Template['requests'].rendered, renderMe);
Template['requestDetails'].rendered = _.wrap(Template['requestDetails'].rendered, renderMe);

Answer 1

这个问题与我的meteor软件包中添加jquery和jquery-history有关。一旦我删除了那些并且只留下了jquery-mobile，幻灯片转换按预期工作。我还有铁路由器，如果我想让股票jquery-mobile过渡工作，我不得不暂时放弃。

jquery-mobile +流星幻灯片转换列表详细信息

1 个答案: