个人中心
gpt4 book ai didi

javascript - 在两个 meteor 模板之间推送数据

转载 作者：行者123 更新时间：2023-12-03 06:18:23 25 4
gpt4 key购买 nike

我有一个带有正文模板的简单 meteor 应用程序，该应用程序有一个简单的表单来创建带有 title、text 和 _id 的帖子。当我创建帖子时，它会在包含更新按钮的帖子模板中呈现。在 javascript 端(客户端)，我有一个像这样的方法:

'click .update'(event){
    event.preventDefault();

    const target = event.target;
    post = Post.find({_id: this._id}).fetch();
    //send post's data to the body template so it can be rendered and updated by the user
}

基本上，我想要一些可以访问正文模板实例并设置其 title、text 和 _id 值的东西。我尝试过 Template.instance()，但似乎不包含这些变量。

我该如何去做呢？用户应该能够单击更新，然后以与创建帖子相同的形式编辑信息(我使用 upsert 进行更新，而不是在帖子已经存在时创建帖子)。

带有模板的 html 文件:

<body>
  <div class="container">
    <header>
      <h1>Post List</h1>
      <form class="new-post">
        <input type="text" name="title" placeholder="Post Title" />
        <input type="text" name="text" placeholder="Post Body" />
        <input hidden name="_id" />
        <button value="Create">Create</button>
      </form>
    </header>

    <ul>
      {{#each posts}}
        {{> post}}
      {{/each}}
    </ul>
  </div>
</body>

<template name="post">
  <li>
    <ul>
      <li>{{_id}}</li>
      <li>{{title}}</li>
      <li>{{text}}</li>
      <li><button class="update" value="Update {{id}}" id='{{id}}'>Update</button></li>
      <li><button class="delete" value="Delete {{id}}" id='{{id}}'>Delete</button></li>
    </ul>
  </li>
</template>

更新函数的逻辑:

Template.body.events({

 'click .update'(event){
   event.preventDefault();
   console.log("post id number: " + this._id);
   const target =Template.instance();//I need to get the instance of the body template here (where posts are created)
   posts = Posts.find({_id: this._id}).fetch();
   target.title.value=posts[0].title;
   target.text.value=posts[0].text;
   target._id.value=posts[0]._id;

 }
});

显然还有其他功能...

最佳答案

首先设置一个reactiveVar (please read the reactiveVar docs)来保存点击更新时的表单数据。

(另外，移动正文 click .update 事件以发布事件)

const post = new ReactiveVar({}); // Set it at the top of your js.

Template.body.events({

});

Template.post.events({
  'click .update'(event){
    event.preventDefault();
    post = Posts.find({_id: this._id}).fetch();
    post.set(post);
  }
});

现在，每次您单击帖子更新按钮时，您都会将该帖子中的数据放入 postreactiveVar 中。

接下来，将帖子表单放入另一个名为 postForm 的模板中:

<body>
  <div class="container">
    <header>
      <h1>Post List</h1>
      {{> postForm}}
    </header>

    <ul>
      {{#each posts}}
        {{> post}}
      {{/each}}
    </ul>
  </div>
</body>

<template name="postForm">
  {{#with post}}
    <form class="new-post">
      <input type="text" name="title" placeholder="Post Title" value="{{title}}">
      <input type="text" name="text" placeholder="Post Body" value="{{text}}">
      <input hidden name="_id" value="{{_id}}">
      <button value="Create">Save</button>
    </form>
  {{/with}}
</template>

<template name="post">
  <li>
    <ul>
      <li>{{_id}}</li>
      <li>{{title}}</li>
      <li>{{text}}</li>
      <li><button class="update" value="Update {{id}}" id='{{id}}'>Update</button></li>
      <li><button class="delete" value="Delete {{id}}" id='{{id}}'>Delete</button></li>
    </ul>
  </li>
</template>

注意{{#with post}}的使用。在此示例中，post 只是一个帮助器，需要创建它以允许访问模板内的 postreactiveVar。另请注意每个输入值中 handle 的使用。

Template.postForm.helpers({
    post: function(){
        return post.get();
    }
});

关于javascript - 在两个 meteor 模板之间推送数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38977000/

25 4 0
文章推荐： javascript - 如何在弹出窗口时停止执行代码？
文章推荐： Magento:制作一种 "unpaid"付款方式，然后通过多次付款逐渐获得付款
文章推荐： ruby-on-rails - Rails cron 每当，捆绑 : command not found
文章推荐： javascript - Microsoft Edge 扩展 document.cookie 存储失败
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com