Reactive Meteor模板和Deps Dependency - 在另一个更改或重新/渲染时更新模板 [英] Reactive Meteor Templates and Deps Dependency -- update a template when another changes or is re/rendered

问题描述

问题：Meteor JS应用程序，包含2个不同的模板，需要共享一些数据。

Problem: Meteor JS app with 2 distinct templates that need to share some data.

它们彼此依赖，因为我的目标是从一个提取文本（步骤1），然后创建动态按钮（第2步）在另一个模板中。按钮的内容取决于表格。

They are dependent on one another, since I aim to extract text (Step 1) from one, and then create dynamic buttons (Step 2) in another template. The content of the buttons is dependent on the table.

buttons.html

buttons.html

<template name="buttons">

   {{#each dynamicButtons }}
    <button id="{{ name }}">{{ name }}</button>
  {{/each}}

</template>

我的目标是名称属性来自reactiveTable的内容.html（见上文或其 Github页面，包 meteor add aslagle：reactive-table 。

My goal is for the name property to come from the content of reactiveTable.html (see above, or their Github page, package meteor add aslagle:reactive-table.

这些需要动态链接，因为表格不断重新呈现不同的产品组，这些产品是链接的通过 Template.reactiveTable 和特定数据上下文（发布/订阅模式）。

These need to be dynamically linked since table re-renders constantly w/ different group of products, which are linked up through Template.reactiveTable and a specific data context (Pub/Sub pattern).

如果表是（重新渲染，然后解析它的内容并提取文本。解析表后，动态地将新创建的按钮注入UI。注意UI.insert有两个参数，即要插入的对象，然后是位置（DOM节点到渲染它。）

IF the table is (re)rendered, then parse it's content and extract text. Once the table is parsed, dynamically inject newly created buttons into the UI. Note UI.insert takes two arguments, the Object to insert, and then location (DOM node to render it in).

Template.reactiveTable.rendered = function () {
    UI.insert( UI.render( Template.buttons ) , $('.reactive-table-filter').get(0) )
};

（每次呈现reactiveTable时插入新按钮。）

(Insert new buttons every time a reactiveTable is rendered.)

此代码有效，但有缺陷，因为我无法从 reactiveTable中获取新呈现的内容。如这个相关问题，使用 ReactiveDict 包：

This code works, but is flawed since I cannot grab the newly rendered content from reactiveTable. As shown in this related question, using ReactiveDict package:

Template.buttons.helpers({
  dynamicButtons: function() {
    var words = UI._templateInstance().state.get('words');
    return _.map(words, function(word) {
      return {name: word};
    });
  }
});

Template.buttons.rendered = function() {

  // won't work w/ $('.reactiveTable) since table not rendered yet, BUT  
  // using $('h1') grabs content and successfully rendered dynamicButtons!

  var words = $('h1').map(function() { 
    return $(this).text();             
  });
  this.state.set('words', _.uniq(words));
};

Template.buttons.created = function() {
  this.state = new ReactiveDict;
};

每次重新渲染创建时，如何更改选择器以从Template.reactiveTable中提取内容按钮动态？谢谢。

How can I change my selector to extract content from Template.reactiveTable every time is re-renders to create buttons dynamically? Thanks.

推荐答案

你在那里使用了很多未记录的函数， UI.insert 和 UI.render 这是不好的做法。刚刚发布的Meteor 0.9.1实际上消除了它们。

You’re using a lot of undocumented functions in there, and UI.insert and UI.render which are bad practice. The just-released Meteor 0.9.1 eliminates them, in fact.

以流星方式创建动态按钮：使它们依赖于被动资源。例如，一个Session变量。 （如果需要，您也可以使用仅限客户端的集合。）

Create your dynamic buttons the Meteoric way: by making them dependent on a reactive resource. For example, a Session variable. (You could also use a client-side-only collection if you want.)

Template.reactiveTable.rendered = function () {
  // Get words from wherever that data comes from
  Session.set('buttons', words);
};

Template.buttons.helpers({
  dynamicButtons: function() {
    if (Session.equals('buttons', null))
      return [];
    else
      return _.map(Session.get('buttons'), function(word) {
        return {name: word};
      });
  }
});

每次 reactiveTable 被呈现或重新呈现时， 按钮会话变量将更新。并且因为您的动态按钮取决于它，并且由于会话变量是一个反应性资源，按钮将自动重新呈现以反映更改。

Every time reactiveTable is rendered or rerendered, the buttons Session variable will update. And because your dynamic buttons are depending on it, and since Session variables are a reactive resource, the buttons will rerender automatically to reflect the changes.

这篇关于Reactive Meteor模板和Deps Dependency - 在另一个更改或重新/渲染时更新模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！