ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

使用会话变量和订阅/发布更新模板,仅使用先前的查询进行更新并附加信息

2019-10-12 12:45:23  阅读:113  来源: 互联网

标签:javascript meteor


这个怎么运作

我为视频收藏集(几乎是视频信息的列表)和规格收藏(与视频收藏集直接相关的信息的列表)设置了下标/出版物.

简而言之,一个视频属于一个规范(又称专业化),一个规范可以包含多个视频.

因此,我选择了一系列规格.更改后,我想加载与该规范相对应的集合中的所有视频.

我的技术是简单地调用Meteor.subscribe(“ videos-pub-sub”,$(evt.target).val());当检测到变化时.使用正确的信息更新集合后,我将使用Session变量来更新模板.

然后在服务器端进行发布:

    Meteor.publish("videos-pub-sub", function (spec){
        console.log("Publishing videos...");
        var res = [];
        if(spec && spec > 0){
            console.log("Spec not empty: " + spec)
            res = Videos.find({spec: parseInt(spec)});
        }else{
            console.log("Spec not set...")
        }
        console.log("publication " + res.fetch().length);
        return res;
    });

问题和问题的描述

>当我选择一个选项时,即使在console.log中正确检索了信息,我的表也未添加视频信息.但是,当我再次选择表时,该表将填充上一个查询.为什么?
>当我进行第三次选择更改时,先前的查询数据将附加到表中.不应该更换吗?还是我必须手动清空表?

相关HTML:

<select id="categories">
  <option></option>
  {{#each specs}}
  <option value="{{id}}">{{name}}</option>
  {{/each}}
</select>


<table id="video_table" class="table table-striped table-hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Authors</th>
      <th>Date Published</th>
      <th>Abstract</th>
      <th>Category</th>
      <th>Private</th>
      <th>Online</th>
      <th>Upload</th>
    </tr>
  </thead>
  <tbody id="video_tbody">
    {{#each videos}}
    <tr>
      <td>{{id}}</td>
      <td>{{title}}</td>
      <td>{{authors}}</td>
      <td>{{date_published}}</td>
      <td>{{description}}</td>
      <td class="category" data-id="{{spec}}">
        {{specName}}
      </td>
      <td>
        <input type="checkbox" aria-label="..." checked="{{#if private}}checked{{/if}}">
      </td>
      <td>{{#if online}}<span class="label label-success">Online</span>{{else}}<span class="label label-default">Offline</span>{{/if}}</td>
      <td>
        <input type="checkbox" checked="checked">
      </td>
    </tr>
    {{/each}}
  </tbody>
</table>

相关JS:

  Template.List.events({
    'change #categories':function(evt){

      Meteor.subscribe("videos-pub-sub", $(evt.target).val());

      console.log('Change #categories detected');
      var vids = Videos.find({}).fetch();
      console.log(vids);

      Session.set("videos-session", Videos.find({}).fetch());
      console.log(Session.get("videos-session"));

    }
  });

如果需要更多的JS,我可以提供更多.

我对Meteor来说还比较陌生,但我仍在尝试查看工作原理.如果您发现我可以改进的地方,请告诉我.

解决方法:

我在项目中看到,当订阅/调用流星上的某些内容时,有时它会运行下一个代码行而没有收到预览服务器的答案,这会带来一些类似您的问题.因此,我通常将应执行的操作嵌套在Subscribe / Call函数内部,然后仅在返回数据后才运行它.

我会做这样的事情:

Template.List.events({
    'change #categories':function(evt){

         Meteor.subscribe("videos-pub-sub", $(evt.target).val(), function(){
               //to empty the table
               $('#video_table').find('tbody').empty();
               var vids = Videos.find({}).fetch();
               Session.set("videos-session", Videos.find({}).fetch());
         });

     }
});

让我知道它是否有效!

标签:javascript,meteor
来源: https://codeday.me/bug/20191012/1900518.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有