Обновления пользовательского интерфейса Meteor.js?

У меня возникли проблемы с поиском способа обновления пользовательского интерфейса ПОСЛЕ добавления в коллекцию. Итак, в приведенном ниже примере после нажатия кнопки и добавления в коллекцию добавляется дополнительный вход в DOM. Все хорошо, но я хотел бы найти способ нацеливаться на новый элемент ввода и предпочтительно уделять ему внимание в дополнение к CSS. К сожалению, я не могу найти какую-либо информацию, которая поможет решить эту проблему ПОСЛЕ обновления DOM. Есть идеи? СпасибоОбновления пользовательского интерфейса Meteor.js?

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

источник

2015-09-03 Adam L

Включите то, что вы добавляете в шаблон, и позвоните этому шаблону 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 как последний был устаревшим для первого.

источник

2015-09-03 03:16:38

Спасибо! Теперь все зависит от того, как настраивается шаблон Blaze. Каждый раз, когда этот шаблон отображается в DOM, вызывается событие onRender. Ну, это слишком просто. Мне трудно понять, как Метеор может это сделать для меня. Я так привык к тому, чтобы подключить все это сам. Но я должен сказать, что Метеор все время выглядит лучше и лучше. На прошлой неделе стало привыкать к тому, что коллекция стала единственным источником правды и снова позволила мне сделать эту часть работы для меня. Еще раз спасибо Касым –

Сделайте это внутри своей вспомогательной функции myCollection. Используйте jquery для таргетинга последнего ввода в свой шаблон и сосредоточьте его, добавьте css. Помощники шаблонов Meteor - это реактивные вычисления, основанные на использовании DOM их реактивных переменных, поэтому он будет запускаться каждый раз при обновлении DOM на основе вашей коллекции.

источник

2015-09-03 02:35:31 danSiebes

Спасибо gdataDan –

Обновления пользовательского интерфейса Meteor.js?

ответ

Смежные вопросы