Meteor会话对象无法实现响应式

Question

我有两个页面，一个是 fila.js，另一个是 retirada.js。 fila.js 中包含一个名为 atualizarChamadas 的函数，我将其导出到 retirada.js 中。

当我从 fila.js 调用该函数时，它可以正常工作，但是当我在 retirada.js 中调用它时，会话对象或反应变量在助手中无法以反应的方式工作。

我的函数位于 fila.js 中：

export default function atualizarChamadas() {
    let chamadas = Chamadas.find({medico: 1},{sort: {data_inicio: -1}}).fetch();
    //Session.set("chamadas", chamadas);
    ChamadasReactive.set(chamadas);
}

我的模板助手

    Template.fila.helpers({
    chamadasAtendimento: function() {
        //return Session.get("chamadas");
        return ChamadasReactive.get().filter((el)=>{
            return el.status == 'A';
        }).slice(0,11);
      }
});

Template.fila.helpers({
    chamadasEspera: function() {
        //return Session.get("chamadas");

        return ChamadasReactive.get().filter((el)=>{
            return el.status == 'E';
        }).slice(0, 11);
      }
});

Template.fila.helpers({
    chamadasFinalizada: function() { 
        return ChamadasReactive.get().filter((el)=>{
            return el.status == 'F';
        }).slice(0, 11);
      }
});

在 fila.js 中，我调用了该函数并且它能够正常工作：

    Template.fila.events({
        "submit form": function (e, template){
            e.preventDefault();
            atualizarChamadas();
        }

});

我有这个 Blaze 模板，当从 fila.js 调用函数时正常工作：

<tbody>  
        {{#each chamada in chamadasEspera}}
            <tr class="success">
                <td>{{chamada.senha}}</td>
                <td>{{chamada.data_inicio}}</td>
                <td></td>
                <td>
                    <select id="{{chamada._id}}" class="form-control">
                        <option value="E">Esperando</option>
                        <option value="A">Atendimento</option>
                        <option value="F">Finalizado</option>
                    </select>
                </td>
                <td><button id="{{chamada._id}}" value="{{chamada.senha}}" name="{{chamada.status}}" class="btn btn-block">Chamar</button></td>

            </tr>
         {{/each}}
    </tbody>


    <br/>

    <tbody>
    {{#each chamada in chamadasAtendimento}}
            <tr class="danger">
                <td>{{chamada.senha}}</td>
                <td>{{chamada.data_inicio}}</td>
                <td></td>
                <td>
                    <select id="{{chamada._id}}"  class="form-control">
                        <option value="A">Atendimento</option>
                        <option value="E">Esperando</option>
                        <option value="F">Finalizado</option>
                    </select>
                </td>
                <td><button id="{{chamada._id}}" value="{{chamada.senha}}"  name="{{chamada.status}}" class="btn btn-block">Chamar</button></td>
             </tr>
     {{/each}}
    </tbody>

    <br/>
    <tbody>
    {{#each chamada in chamadasFinalizada}}
        <tr class="info">
            <td>{{chamada.senha}}</td>
            <td>{{chamada.data_inicio}}</td>
            <td>{{chamada.data_fim}}</td>
            <td>
                <select id="{{chamada._id}}"  class="form-control">
                    <option value="F">Finalizada</option>
                    <option value="E">Esperando</option>
                    <option value="A">Atendimento</option>
                </select>
            </td>
            <td></td>
        </tr>
    {{/each}}
     </tbody>
  </table>
  {{/if}}

在我的页面retirada.js中，我有这段调用atualizarChamadas的代码，但它不具备响应性：

 Template.retirada.events({
    "click button": function(e,template){
        let newPass = e.target.id,
            id = Retirada.find({}).fetch()[0]._id;

        console.log('01:' + Chamadas.find({medico: 1},{sort: {data_inicio: -1}}).fetch().length);

        Retirada.update(id, {count: newPass});
        Chamadas.insert(
            {senha: newPass, status : 'E', data_inicio: new Date(), medico: 1});

        console.log('02:' + Chamadas.find({medico: 1},{sort: {data_inicio: -1}}).fetch().length);

        setTimeout (teste, 1000);

        function teste(){
            atualizarChamadas();
        }
    }
     });

当调用console.log时，我可以看到chamadas对象的长度增加了，但是我的模板没有刷新新数据。我曾试图通过更改文档的方法来解决问题，但现在我已经改为在视图上进行更改，但仍然无法正常工作。

我需要一些帮助。

- Vitor Brito

Answer 1

我认为问题出在事件处理程序中使用Meteor调用。以下是几个替代包，允许进行反应式方法调用：meteor-reactive-method和mnmtanish:call。

- mutdmour

---

我停止使用方法调用，现在直接在视图上更改Mongo文档，但仍然无法工作。 - Vitor Brito

我通常通过在Meteor调用中直接使用jQuery更改视图来解决这些问题。我会更新我的答案。 - mutdmour

刚注意到你改了代码。你在使用Iron Router吗？你可以将游标（Chamadas.find()作为路由数据的一部分）返回。这样做非常可靠。如果你需要过滤器，Session变量在iron router的数据上下文中工作得很好。如果你需要更多关于如何做到这一点的信息，请告诉我。出于安全原因，你仍然应该在服务器端使用Meteor调用，并阻止客户端进行插入/更新/删除操作。 - mutdmour

我修改了代码，试图使其更加易于理解，我删除了方法调用，并且我也使用了iron-router，我将尝试使用Iron返回我的集合并再次回来，谢谢！ - Vitor Brito

我在template.rendered中使用了来自iron的数据，它可以正常工作，但只能在第一次重新加载时使用，如何从另一个页面实现它？ - Vitor Brito

Answer 2

我用这段代码解决了我的问题，我直接在帮助器返回中使用了集合，并且当我的集合发生变化时，响应性也再次起作用。

Template.fila.helpers({
    chamadasAtendimento: function() {
        //return Session.get("chamadas");
        return Chamadas.find({medico: 1},{sort: {data_inicio: -1}}).fetch().filter((el)=>{
            return el.status == 'A';
        }).slice(0,11);
      }
});

Template.fila.helpers({
    chamadasEspera: function() {
        return Chamadas.find({medico: 1},{sort: {data_inicio: -1}}).fetch().filter((el)=>{
            return el.status == 'E';
        }).slice(0, 11);
      }
});

Template.fila.helpers({
    chamadasFinalizada: function() { 
        return Chamadas.find({medico: 1},{sort: {data_inicio: -1}}).fetch().filter((el)=>{
            return el.status == 'F';
        }).slice(0, 11);
      }
});

- Vitor Brito