उल्का टेम्पलेट

अद्यतन मैं मेटियर के लिए नया हूँ। मैंने सरल परीक्षण किया और बहुत आसान भाग पर फंस गया। मेरे वेबपृष्ठ की सामग्री केवल तभी बदलती है जब डीबी बदलता है, लेकिन फ़ंक्शन रिटर्निंग परिणाम बदलते समय मैं इसे कैसे अपडेट कर सकता हूं?उल्का टेम्पलेट

client.js:

Meteor.subscribe("tasks"); 

var search_query = ""; 

Template.page.tasks = function() { 
    return Tasks.find({title: {$regex: search_query}}); 
}; 

Template.task.events({ 
    'click .checkmark': function() { 
     Tasks.update({_id: this._id}, {$set: {done: !this.done}}); 
    } 
}); 

Template.page.events({ 
    'keyup .search': function() { 
     search_query = $(".search").val(); 
    } 
});

todo.html:

<head> 
    <title>Todo list</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 

<body> 
    {{> page}} 
</body> 

<template name="page"> 
    <div class="tasks"> 
     <h1>Collections TODOs</h1> 
     <input type="text" class="search" placeholder="Search..."> 
     {{#each tasks}} 
      {{> task}} 
     {{/each}} 
    </div> 
</template> 

<template name="task"> 
    <div class="task well well-small"> 
     <button type="button" class="close cancel">&times;</button> 
     <h3> 
      {{#if done}} 
       <button type="button" class="checkmark done">&#10003;</button> 
      {{else}} 


    <button type="button" class="checkmark muted">&#10003;</button> 
     {{/if}} 
     {{title}} 
    </h3> 
    <div class="creator muted">{{creator}}</div> 
    <p>{{description}}</p> 
</div>

तो अब, मैं उम्मीद जब भी उपयोगकर्ता प्रकार इनपुट में कुछ यहाँ मेरी आवेदन के कोड का हिस्सा है .search बॉक्स वैरिएबल search_query बदल दिया गया है और अब Template.page.tasks अलग-अलग परिणाम देता है। लेकिन वास्तव में कुछ भी अद्यतन नहीं है। आप http://slava.meteor.com

स्रोत

2013-01-10 imslavko

पर ऐप देख सकते हैं, आपको डायनामिक रूप से फिर से खोज चलाने के लिए reactive variable की आवश्यकता है। इस

Template.page.tasks = function() { 
    return Tasks.find({title: {$regex: Session.get("search_query") }}); 
};

की तरह और अपनी स्थिति में search_query एक Session चर करें:

Template.page.events({ 
    'keyup .search': function() { 
     Session.set("search_query", $(".search").val()); 
    } 
});

स्रोत

2013-01-10 23:09:41 TimDog

धन्यवाद, यह काम करता है। लेकिन अब, हर बार मेरे खोज क्षेत्र dissappers से टेम्पलेट अद्यतन पाठ। ऐसा लगता है कि पृष्ठ ताज़ा हो जाता है। क्या आप कोई संकेत दे सकते हैं, मैं बेहतर यूआई कैसे बना सकता हूं? – imslavko

मैं स्पष्ट रूप से '<इनपुट प्रकार =" पाठ "वर्ग =" खोज "प्लेसहोल्डर =" खोज ... "मान = {{search_query}}>' सेट कर सकता हूं और मैन्युअल रूप से उस पर ध्यान केंद्रित कर सकता हूं, लेकिन यह अभी भी थोड़ी अजीब – imslavko

देखें [preseve-input] (http://docs.meteor.com/#template_preserve) पृष्ठ को रीफ्रेश होने पर उपयोगकर्ता इनपुट को संरक्षित करने के साधनों के लिए। –

उत्तर

संबंधित मुद्दे