Question

我在找到添加到集合后更新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});
        }
    });
}

Answer 1

在myCollection帮助函数中执行此操作。使用jquery来定位模板中的最后一个输入并聚焦它，添加css。 Meteor的模板助手是基于其反应变量的DOM使用的反应性计算，因此每次DOM根据您的集合更新时它都会运行。

Answer 2

将您要添加的内容转换为模板并调用该模板rendered以设置所需的css或进行所需的任何转换。

HTML：

<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>

JS：

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();
    }
}

在旁注中，您应该使用onRendered而不是rendered，因为前者已被弃用。

使用Meteor.js进行UI更新？

2 个答案: