meteor - Meteor - 如何在模板的助手和事件之间传递数据？

Question

我对 Meteor 有点陌生，我遇到的问题是反应性数据——特别是在我需要根据鼠标或键盘事件更改显示的数据的情况下。以正常的 js 方式做这种事情似乎给我带来了流星的麻烦，因为我改变的所有东西都会不断地重新渲染和重置。

所以，我想我会看看这是否是我可以使用 Meteor 的 Deps 对象的情况，但是我不能完全掌握它。这是我正在使用的代码：

(function(){

    var tenants = [];
    var selectedTenant = 0;

    var tenantsDep = new Deps.Dependency;

    Template.tenantsBlock.tenantsList = function()
    {
        tenants = [];
        var property = $properties.findOne({userId: Meteor.userId(), propertyId: Session.get('property')});
        var tenancies = _Utils.resolveTenancies(property, true, null, true);

        for(var i = 0; i < tenancies.length; i++)
        {
            if(tenancies[i].tenancyId == Session.get('tenancy'))
            {
                tenants = tenants.concat(tenancies[i].otherTenants, tenancies[i].primaryTenant);
            }
        }

        tenants[selectedTenant].selected = 'Selected';

        tenantsDep.changed();

        return tenants;
    };

    Template.tenantsBlock.onlyOneTenant = function()
    {
        tenantsDep.depend();

        return tenants.length > 1 ? '' : 'OneChild';
    };

    Template.tenantsBlock.phoneNumber = function()
    {
        tenantsDep.depend();

        for(var i = 0; i < tenants[selectedTenant].details.length; i++)
            if(_Utils.getDynamicContactIconClass(tenants[selectedTenant].details[i].key) == 'Phone')
                return tenants[selectedTenant].details[i].value;

        return null;
    };

    Template.tenantsBlock.emailAddress = function()
    {
        tenantsDep.depend();

        for(var i = 0; i < tenants[selectedTenant].details.length; i++)
            if(_Utils.getDynamicContactIconClass(tenants[selectedTenant].details[i].key) == 'Email')
                return tenants[selectedTenant].details[i].value;

        return null;
    };

    Template.tenantsBlock.addedDate = function()
    {
        tenantsDep.depend();
        return _Utils.timeToDateString(tenants[selectedTenant].created);
    };

    Template.tenantsBlock.events({
        'click .Name': function(e, template)
        {
            tenantsDep.depend();
            var _this = e.currentTarget;
            var tenantName = _this.innerHTML;

            $(_this).addClass('Selected');
            $(_this).siblings().removeClass('Selected');

            for(var i = 0; i < tenants.length; i++)
            {
                if(tenants[i].name == tenantName)
                    tenants[i].selected = "Selected";
                else
                    tenants[i].selected = '';
            }
        }
    })


})();

^这似乎是他们在流星文档（http://docs.meteor.com/#deps_dependency）中为dependency.changed（）和dependency.dependency（）得到的，但这一切都给了我无限环形。

那么我可以修改我声明 deps 的方式以使数据具有响应性吗？有没有更好的方法可以一起完成这一切？

更新：

尽管我对此持怀疑态度，但我一直倾向于尝试以本地化方式使用 Session.set/Session.get。所以，下次我必须这样做时，我会这样做

Session.set('tenantsBlock' {tenants: [], selectedTenant: 0});

然后只需从与 Template.tenantsBlock 相关的帮助程序和事件映射中访问此变量。这样，他们都可以实时访问数据，并且在数据更改时都可以重新运行。这是我将此脚本转换为的内容（抱歉，它们都太大了）：

(function()
{
Template.tenantsBlock.created = Template.tenantsBlock.destroyed =function()
{
    _Utils.setSession('tenantsBlock', {
        tenants: [],
        selectedTenant: 0
    })
};

Template.tenantsBlock.tenantsList = function()
{
    var localContext = Session.get('tenantsBlock');
    localContext.tenants = [];
    var property = $properties.findOne({userId: Meteor.userId(), propertyId: Session.get('property')});
    var tenancies = _Utils.resolveTenancies(property, true, null, true);

    for(var i = 0; i < tenancies.length; i++)
    {
        if(tenancies[i].tenancyId == Session.get('tenancy'))
        {
            localContext.tenants = localContext.tenants.concat(tenancies[i].otherTenants, tenancies[i].primaryTenant);
            break;
        }
    }

    localContext.tenants[localContext.selectedTenant].selected = 'Selected';
    Session.set('tenantsBlock', localContext);

    return localContext.tenants;
};

Template.tenantsBlock.onlyOneTenant = function()
{
    var localContext = Session.get('tenantsBlock');
    return localContext.tenants.length > 1 ? '' : 'OneChild';
};

Template.tenantsBlock.phoneNumber = function()
{
    var localContext = Session.get('tenantsBlock');
    for(var i = 0; i < localContext.tenants[localContext.selectedTenant].details.length; i++)
        if(_Utils.getDynamicContactIconClass(localContext.tenants[localContext.selectedTenant].details[i].key) == 'Phone')
            return localContext.tenants[localContext.selectedTenant].details[i].value;

    return null;
};

Template.tenantsBlock.emailAddress = function()
{
    var localContext = Session.get('tenantsBlock');
    var selectedTenantDetails = localContext.tenants[localContext.selectedTenant].details;

    for(var i = 0; i < selectedTenantDetails.length; i++)
        if(_Utils.getDynamicContactIconClass(selectedTenantDetails[i].key) == 'Mail')
            return selectedTenantDetails[i].value;

    return null;
};

Template.tenantsBlock.addedDate = function()
{
    var localContext = Session.get('tenantsBlock');
    return _Utils.timeToDateString(localContext.tenants[localContext.selectedTenant].created);
};

Template.tenantsBlock.events({
    'click .Name': function(e, template)
    {
        var localContext = Session.get('tenantsBlock');
        var _this = e.currentTarget;
        var tenantName = _this.innerHTML;

        for(var i = 0; i < localContext.tenants.length; i++)
        {
            if(localContext.tenants[i].name == tenantName)
            {
                localContext.tenants[i].selected = 'Selected';
                localContext.selectedTenant = i;
            }
            else
            {
                localContext.tenants[i].selected = '';
            }
        }

        Session.set('tenantsBlock', localContext);
    }
})

})();

score 15 · Accepted Answer

你必须克服老派的做法:) Meteor 比你想象的要简单得多。一个好的经验法则是，如果您使用 jQuery 来操作任何 DOM 元素，那么您可能做错了。此外，如果您在不使用集合 API 的情况下访问任何数据，那么您最好有充分的理由这样做。

在您的情况下，您根本不需要编写任何手动依赖项。大多数 Meteor 应用程序很少需要手动依赖。

您需要做的第一件事是将所有租户放在一个Meteor.Collection中，这将使他们更容易使用。

Tenants = new Meteor.Collection("tenants");

您的tenantsBlock模板应该看起来像这样（以一些不同的 html 元素为模）：

<template name="tenantsBlock">
    <ol>    
    {{#each tenants}}
        <li class="name {{selected}}">
            <span>Primary Tenant: {{primaryTenant}}</span>
            <span>Other Tenants: {{otherTenants}}</span>
            <span>Phone Number: {{phoneNumber}}</span>
            <span>Email Address: {{emailAddress}}</span>
            <span>Added Date: {{addedDate}}</span>
        </li>    
    {{/each}}
    </ol>
</template>

中的每个文档Tenants应如下所示：

{
    primaryTenant: "Joe Blow",
    otherTenants: "Mickey Mouse, Minnie Mouse",
    phoneNumber: "555-234-5623",
    emailAddress: "joe.blow@foo.com",
    addedDate: "2005-10-30T10:45Z"
}

然后，您需要的所有代码仅用于选择/取消选择，您可以删除其他所有内容：

Template.tenantsBlock.tenants = function() {
    return Tenants.find();
};

Template.tenantsBlock.selected = function() {
    return Session.equals("selectedTenant", this._id);
};

Template.tenantsBlock.events({
    'click .name': function(e) {   
        Session.set("selectedTenant", this._id);
    }
});

我再次重申，在使用 Meteor 时，您永远不应该使用 Javascript 进行 DOM 操作。您只需更新您的数据，如果一切都正确完成，您的模板将响应更新。声明您希望数据的外观，然后更改数据并观察魔术。

score 0 · Accepted Answer

自从我在 2013 年发布这篇文章以来，Meteor 已经真正进化了。我认为我应该发布一种现代的、更高级的方法。

一段时间以来，您已经能够创建一个ReactiveVar，现在您可以将它们直接附加到模板中。ReactiveVar 与 Session 类似，是一种反应式数据存储。然而，ReactiveVar 只保存一个值（任何类型）。

您可以通过在终端中从应用程序的根目录运行它来将ReactiveVar添加到项目的客户端：

$meteor add reactive-var

此 javascript 显示了如何在模板的onCreated、onRendered、onDestroyed和.eventshelpers

Template.myTemplate.onCreated = function() {
    // Appends a reactive variable to the template instance
    this.reactiveData = new ReactiveVar('Default Value');
};

Template.myTemplate.events({
    'click .someButton': (e, template) => {
        // Changes the value of the reactive variable for only this template instance
        template.reactiveData.set('New Value');
    },
});

Template.myTemplate.helpers({
    theData: () => {
        // Automatically updates view when reactive variable changes
        return Template.instance().reactiveData.get();
    },
});

这是优越的有几个原因：

它仅将变量范围限定为单个模板实例。在页面上可能有十几个模板实例且都需要独立状态的情况下特别有用。
当模板消失时它就消失了。使用 ReactiveVar 或 Session 变量，您将必须在模板被销毁时清除该变量（如果它甚至可以预见地被销毁）。
这只是更清洁的代码。

加分项：请参阅ReactiveDict以了解您在页面上同时有多个模板实例但需要管理少数反应变量并使这些变量在会话期间保持不变的情况。

meteor - Meteor - 如何在模板的助手和事件之间传递数据？

2 回答 2

Related

Reference