試圖觸發模板渲染的流星會話
[英]Meteor session trying to trigger template render
問題描述
目前我遇到了meteor會話以及我的代碼如何觸發它來呈現模板。 目前我有一個會話，它將._id設置為點擊的內容。
Template.sidebar.events({
/* on click of current sidecat class change to sidecat selected */
'click .sidecat': function (event) {
Session.set("selected_project", this._id);
}
});
如果selected_player等於div，我會添加一個css類。
Template.sidebar.sidebarselected = function () {
return Session.equals("selected_project", this._id) ? "sidebarselected" : '';
}
現在我在sidebarselected和另一個類存在時渲染模板。 單擊該項目時，它將呈現模板。
Template.sidebar.projectselected = function() {
var find = Session.get("selected_project");
var find2 = ($("#"+find).attr('class'));
/* if exists return true render the template */
if (find2 == 'project sidebarselected')
{
return true
}
/* else don't render it return null */
else {
return null
}
};
到目前為止，一切都很有效。 現在我有一個Button，它在列表中創建一個新項目並使其成為所選項目。 這是麻煩發生的時候。 當我創建一個新項時，列表項被渲染並給出類sidebarselected，但它不呈現應該調用的模板。 單擊某個項目時，它會渲染模板。 但不是在使用按鈕創建新列表項時。 它被選中但不渲染模板。 這是代碼。
Template.sidebar.events({
/* add bar settings menu functions for clicks */
'click #newProject': function(event){
var create = NewProject();
Session.set("selected_project", create);
},
這是NewProject功能
/* add a new project to the side bar */
function NewProject() {
id = Aprojects.insert({
name: "New Project",
type: "project"
});
doc = Aprojects.findOne({_id:id});
return doc._id;
}
好吧有一切。 單擊按鈕時會創建項目，添加類但不呈現模板。 這是所有的JavaScript，如果html需要讓我知道，我會提供它。
讓我添加一些細節和html模板的東西。 但無論如何，工作是什么
- 您可以在列表中選擇一個項目
- 當您選擇一個項目（通過點擊它）時，它會給出一個類名來表示它已被選中
- 當您單擊“新項目”時，您想要將項目添加到列表中並立即選擇它
一切正常。 問題是單擊新項目按鈕時。 它仍然正確地選擇新制作的項目並給它一個選定的類。 如果它發現selectedbar類也有一個帶有它的項目類，那么它不會發生什么。 它呈現一個單獨的模板（projectpicked）。 單擊項目時會顯示Projectpicked。 不是在點擊#newproject時。 即使通過它最終選擇它也不會顯示projectpicked模板。 讓我看看代碼是否可以做更多的談話。
<body>
{{> sidebar}}
</body>
<template name="sidebar">
{{#if aproject}}
{{#each aproject}}
<div class="sidecat {{sidebarselected}} project" id="{{divids}}">
{{name}}
</div>
{{/each}}
{{/if}}
{{#if projectselected}}
{{> projectpicked}}
{{/if}}
</template>
<template name="projectpicked">
project was picked from sidebar
</template>
應用程序邏輯和DOM結構組合背后的原因是我除了類別之外還有其他項目。 我認為使用session獲取id然后我們找出它是什么類的項目或類別，並根據它是什么類顯示不同的模板。 不知道它是否是最好的方式，但這是我想出來的。 接受建議。 如果有些事情不清楚我不知道，我會試着解釋一下。 謝謝您的幫助。
2 個解決方案
解決方案1
2 2013-02-27 01:46:50
我會重寫projectselected幫助程序，不依賴於HTML類名來執行其邏輯，而是依賴於Session值。 您在大多數代碼中都正確使用了Session ，但是將應用程序邏輯與DOM結構相結合似乎很奇怪。
您的代碼目前的工作方式（沒有看到您的HTML模板 - 您也應該發布它！），看起來您希望它執行以下操作：
- 您可以在列表中選擇一個項目
- 當您選擇一個項目（通過點擊它）時，它會給出一個類名來表示它已被選中
- 當您單擊“新項目”時，您想要將項目添加到列表中並立即選擇它
這是我如何解決這種情況：
你的模板
<body>
{{> sidebar}}
</body>
<template name="sidebar">
<ul>
{{#each items}}
<li class="{{selected}} project" id="id_{{_id}}">{{_id}}</li>
{{/each}}
{{> newproject}}
</ul>
{{> projectpicked}}
</template>
<template name="newproject">
<li id="newproject">Create a new project</li>
</template>
<template name="projectpicked">
{{#if projectpicked}}
A project was picked!
{{/if}}
</template>
你的javascript
// When clicking an item in the list, remember which one we just clicked
Template.sidebar.events({
"click li": function() {
Session.set("selected_project", this._id);
}
});
// Add the selected class to the item that was remembered
// by the session when we clicked on it
Template.sidebar.selected = function() {
return Session.equals("selected_project", this._id) ? "selected" : "";
}
Template.sidebar.items = function() {
// or whatever code you have to return the list of items
return Projects.find();
}
// when clicking the new project button, create the new project
// and remember the id, then store that as the selected value in the session.
Template.newproject.events({
"click #newproject": function() {
var newprojectId = newProject(); // do your thing
Session.set("selected_project", newprojectId);
}
});
Template.projectpicked.projectpicked = function() {
return !Session.equals("selected_project", undefined);
}
這里的關鍵是僅在單擊某些內容時設置selected_project會話值。 這發生了兩次; 單擊某個項目以選擇它時，以及單擊新項目時。
要使模板繪制所選項目，您在Meteor中需要做的就是在選擇項目時進行描述：當某個會話值與其ID匹配時，選擇項目。 就這樣。
我沒有測試過這段代碼，但它顯然是不完整的，但希望這可以指出你在重構代碼方面的正確方向。
解決方案2
0 已采納 2013-03-01 17:20:46
好吧，在相當沮喪並重寫大部分代碼后，我發現了問題。 在我的projectpicked模板中，而不是使用Session.get，然后使用它來查找類。 而不是我只有一個
if ($('.sidecat.project').hasClass('sidebarselected')) {
return true
}
原來是：
if (find2 == 'project sidebarselected')
{
return true
}
所以我使用了一些jquery，而不是直接將變量find2與字符串進行比較。
流星：帶有參數的渲染模板
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.