Jquery mobile 从列表中选择项目后,Meteor only触发器模板

Jquery mobile 从列表中选择项目后,Meteor only触发器模板,jquery-mobile,meteor,meteor-blaze,spacebars,Jquery Mobile,Meteor,Meteor Blaze,Spacebars,我有一个典型的场景,其中有一个列表视图,然后是详细视图。您可以通过选择一个列表项进入详细信息视图。记录中的数据当然会通知布局视图细节。我看到的是,子模板的helper函数调用得太快(在列表视图呈现期间),无法获得列表详细信息的数据。此外,当我单击列表中的项目时,它不会被调用。我做错了什么?我将Meteor 0.8.2与jQM 1.4.3一起使用 HTML如下所示: <!-- details page --> <div data-role="page" data-theme="q

我有一个典型的场景,其中有一个列表视图,然后是详细视图。您可以通过选择一个列表项进入详细信息视图。记录中的数据当然会通知布局视图细节。我看到的是,子模板的helper函数调用得太快(在列表视图呈现期间),无法获得列表详细信息的数据。此外,当我单击列表中的项目时,它不会被调用。我做错了什么?我将Meteor 0.8.2与jQM 1.4.3一起使用

HTML如下所示:

<!-- details page -->
<div data-role="page" data-theme="q" id="listdetail">
    <div data-role="header" data-position="fixed">
        <a data-rel="back"  href="#" data-transition="slideleft" class="baack fa fa-arrow-left"></a>
        <div id="detailTitle" class="headertitle"></div>
    </div>
    <!-- /header -->

    <div data-role="content" class="ma-req-detail" id="details">
        {{> qDetails}}
    </div>
</div>
<!-- /details page -->

<template name="qList">
    {{#each items}}
        {{>qListItems}}
    {{/each}}
</template>
<template name="qListItems">
    <li>
        <div id="msg-container-{{requestId}}" class="processing-msg">
            <a href="#" data-rel="back" data-role="button"  data-iconpos="notext" class="ui-btn-right  msg-dismiss"><i class="fa fa-2x fa-times-circle"></i></a>
            <p class="msg-text-{{requestId}}">Action pending...</p>
        </div>
        <a id="requestId" href="#listdetail" data-name="{{additionalProperties}}" data-transition="slide" class="{{#if isProcessing}}ui-disabled{{/if}}">

            <p class="requestor">{{additionalProperties.requestedForUid}}</p>
            <p class="description">week of {{additionalProperties.workWeekOf}}</p>
            <p class="reqdate">total hours: </p>
        </a>
    </li>
</template>

<template name="qDetails" >
    <div role="main" class="q-details">
        <div data-role="navbar" class="week-nav">
            <ul>
                {{#each days}}
                {{>navElements}}
                {{/each}}
            </ul>
        </div>
    </div>

    <div class="ma-buttons ui-fieldcontain ui-footer-fixed">
        <div data-role="controlgroup" data-type="horizontal" class="" data-position-fixed="true" data-position="bottom">
            <a data-mini="true" href="#" id="approve-request"
               class="ui-btn ui-btn-c ui-corner-r ui-icon-check ui-btn-icon-left ma-btn approve">Approve</a>
        </div>
    </div>
</template>

<template name="navElements">
    <li><a id="{{day}}Nav" href="#{{day}}">{{day}}<br><span class="digital-date">{{date}}</span></a></li>
</template>

{{>qDetails}
{{{#每项}
{{>qListItems}
{{/每个}}
  • 操作挂起

    • {{{每天} {{>navElements} {{/每个}}
  • JS位是:

    Template.qDetails.rendered = function() {
        $('#details').trigger('create');
    };
    
    Template.qDetails.helpers({
        days: function() {
            //TODO need a way to delay this function to call when details template is shown 
            var dt = Session.get("record").additionalProperties.workWeekOf;
            var days = [];
            var weekday = new Array(7);
            weekday[0] = "SAT";
            weekday[1] = "SUN";
            weekday[2] = "MON";
            weekday[3] = "TUE";
            weekday[4] = "WED";
            weekday[5] = "THU";
            weekday[6] = "FRI";
    
            var dtVal = dt.getDate();
            for (var i = 0; i < 7; i++) {
                var dayObj = {};
                dayObj.date = dtVal + i;
                dayObj.day = weekday[i];
                days.push(dayObj);
            }
            return days;
        }
    });
    
    Template.qDetails.record = function () {
        return Session.get("record");
    };
    
    Template.qDetails.rendered=function(){
    $(“#详细信息”).trigger('create');
    };
    Template.qDetails.helpers({
    天数:函数(){
    //TODO需要一种方法来延迟显示详细信息模板时调用此函数
    var dt=Session.get(“记录”).additionalProperties.workWeekOf;
    风险值天数=[];
    var weekday=新数组(7);
    工作日[0]=“周六”;
    工作日[1]=“太阳”;
    工作日[2]=“周一”;
    工作日[3]=“星期二”;
    工作日[4]=“星期三”;
    工作日[5]=“星期四”;
    工作日[6]=“周五”;
    var dtVal=dt.getDate();
    对于(变量i=0;i<7;i++){
    var dayObj={};
    dayObj.date=dtVal+i;
    dayObj.day=工作日[i];
    推送(dayObj);
    }
    返程天数;
    }
    });
    Template.qDetails.record=函数(){
    返回会话。获取(“记录”);
    };
    

    在上面的代码中,当显示列表页面时,会调用“days”helper函数,这会导致错误,因为它试图从尚未选择的记录中提取“workWeekOf”日期。一旦选择了一条记录,我如何才能进行此唯一调用?

    这有点让人困惑,因为上面没有任何内容显示您的
    qDetails
    模板是如何首先呈现的。但是,如果确实如此,您可以使用:

    var dt = Session.get("record") ? Session.get("record").additionalProperties.workWeekOf : [default date]
    

    [默认日期]
    可以是任何合理的选项(如
    新日期()
    ),但您需要返回一些内容以避免抛出错误。这是Meteor中一个非常常见但很容易解决的问题-您只需要在会话变量或集合尚未就绪时使用合适的默认值。

    好的,请查看上面更新的代码。有一个jQM页面正在从
    qListItems
    中列表项的href链接调用
    qDetails
    。我用调试器语句硬编码日期,但在选择项目时没有调用它。但是,当我添加这个三元op以在需要时获得实际日期时,它起了作用,所以谢谢!