用Meteor.js更新用户界面？_Meteor_Meteor Blaze

用Meteor.js更新用户界面？

meteor

用Meteor.js更新用户界面？,meteor,meteor-blaze,Meteor,Meteor Blaze,在添加到集合后，我无法找到更新UI的方法。因此，在下面的示例中，单击按钮并将其添加到集合后，将向DOM添加额外的输入。一切都很好，但我想找到一种方法来定位新的输入元素，最好除了CSS之外还关注它。不幸的是，在DOM更新后，我找不到任何有助于解决此问题的信息。有什么想法吗？谢谢 <body> {{> myTemplate}} </body> <template name="myTemplate"> {{#each myCollection}}

在添加到集合后，我无法找到更新UI的方法。因此，在下面的示例中，单击按钮并将其添加到集合后，将向DOM添加额外的输入。一切都很好，但我想找到一种方法来定位新的输入元素，最好除了CSS之外还关注它。不幸的是，在DOM更新后，我找不到任何有助于解决此问题的信息。有什么想法吗？谢谢

<body>
  {{> myTemplate}}
</body>

<template name="myTemplate">
    {{#each myCollection}}
        <input type="text" value="{{name}}"><br>
    {{/each}}
    <br>
    <button>Click</button><input type="text" value="test" name="testBox">
</template>

test = new Meteor.Collection("test");

if (Meteor.isClient) {
    Template.myTemplate.rendered = function()
    {
        console.log("rendered");
        this.$('input').focus() 
    }
    Template.myTemplate.helpers({
        'myCollection' : function(){
            var testCollection = test.find({});
            console.log("helpers");
            return testCollection;
        }
    });
    Template.myTemplate.events({
        'click button': function(event){
            event.preventDefault();
            var val = $('[name="testBox"]').val();
            console.log("events");
            return test.insert({name: val});
        }
    });
}


{{>myTemplate}}
{{{#每个myCollection}


{{/每个}}


点击
测试=新流星收集（“测试”）；
if（Meteor.isClient）{
Template.myTemplate.rendered=函数（）
{
控制台日志（“呈现”）；
这个.$（'input'）.focus（）
}
Template.myTemplate.helpers({
“myCollection”：函数（）{
var testCollection=test.find（{}）；
控制台日志（“助手”）；
返回testCollection；
}
});
Template.myTemplate.events({
“单击按钮”：函数（事件）{
event.preventDefault（）；
var val=$（'[name=“testBox”]'）。val（）；
控制台日志（“事件”）；
返回test.insert（{name:val}）；
}
});
}

在myCollection助手函数中执行此操作。使用jquery以模板中的最后一个输入为目标，并对其进行聚焦，添加css。Meteor的模板帮助程序是基于其反应变量的DOMs使用情况的反应式计算，因此它将在每次DOM根据您的集合进行更新时运行。

在myCollection帮助程序函数中执行此操作。使用jquery以模板中的最后一个输入为目标，并对其进行聚焦，添加css。Meteor的模板助手是基于其反应变量的DOMs使用情况的反应式计算，因此它将在每次DOM根据您的集合进行更新时运行。

将您要添加的内容转换到模板中，并调用该模板的

呈现

，以设置所需的css或执行所需的任何转换

HTML:

另一方面，您应该使用

onRendered

而不是

rendered

，因为前者已被弃用。

将要添加的内容转换到模板中，并调用该模板的

rendered

来设置所需的css或执行任何需要的转换

HTML:

另一方面，您应该使用

onRendered

而不是

rendered

，因为后者已不推荐用于前者。

谢谢！这在Blaze模板的设置上完全有意义。每次将该模板呈现到DOM中时，都会调用onRender事件。那太简单了。我发现很难想象流星是如何为我工作的。我已经习惯了自己接线。但我必须说，流星看起来越来越好的时间。上周，我已经习惯了把藏品作为真相的唯一来源，并再次让它为我完成这部分工作。再次感谢，谢谢！这在Blaze模板的设置上完全有意义。每次将该模板呈现到DOM中时，都会调用onRender事件。那太简单了。我发现很难想象流星是如何为我工作的。我已经习惯了自己接线。但我必须说，流星看起来越来越好的时间。上周，我已经习惯了把藏品作为真相的唯一来源，并再次让它为我完成这部分工作。再次感谢卡西姆

<body>
  {{> myTemplate}}
</body>

<template name="item">
    <input type="text" value="{{name}}"><br>
</template>

<template name="myTemplate">
    {{#each myCollection}}
        {{> item this}}
    {{/each}}
    <br>
    <button>Click</button><input type="text" value="test" name="testBox">
</template>

test = new Meteor.Collection("test");

if (Meteor.isClient) {
    Template.myTemplate.onRendered(function() {
        console.log("rendered");
        this.$('input').focus() 
    });
    Template.myTemplate.helpers({
        'myCollection' : function(){
            var testCollection = test.find({});
            console.log("helpers");
            return testCollection;
        }
    });
    Template.myTemplate.events({
        'click button': function(event){
            event.preventDefault();
            var val = $('[name="testBox"]').val();
            console.log("events");
            test.insert({name: val});
        }
    });
    Template.item.onRendered(function() {
        this.$('input').focus();
    }
}