流星會議試圖觸發模板渲染

目前我遇到流星會議的麻煩，以及我的代碼如何觸發它來呈現模板。目前我有一個會話，它將._id設置爲任何被點擊的內容。流星會議試圖觸發模板渲染

Template.sidebar.events({ 
/* on click of current sidecat class change to sidecat selected */ 
'click .sidecat': function (event) { 
    Session.set("selected_project", this._id); 
    } 
});

我有它添加一個CSS類如果selected_player等於div。

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

到目前爲止，一切都很好。現在我有一個按鈕，它在列表中創建一個新項目，並使其成爲選定的項目。這是發生問題的時候。當我創建一個新的Item時，列表項被渲染，並且給出了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被點擊時不是。即使通過它最終選定它不顯示項目選擇模板。讓我看看代碼是否可以做更多的談話。

<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結構組合背後的推理是我除了類別之外還有其他項目。我想通過使用會話得到的id，然後我們找出它是什麼類，它是像項目或類別，並顯示一個不同的模板基於它是什麼類。不知道它是否是最好的方式，但這是我想出的。接受建議。如果有些事不清楚，我不知道，我會盡力解釋它。謝謝您的幫助。

來源

2013-02-26 asiammyself

好，越來越很不順心一遍又一遍重寫大部分的代碼後，我發現這個問題。在我的項目選擇模板中，而不是使用Session.get，然後使用它來查找類。在代替我只是有一個

if ($('.sidecat.project').hasClass('sidebarselected')) { 
return true 
}

雖然原來是：

if (find2 == 'project sidebarselected') 
{ 
return true 
}

所以我用一些jquery的，而不是直接變量find2比較字符串。

來源

2013-03-01 17:20:46 asiammyself

我會重寫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會話值，當你點擊一下。這會發生兩次;當你點擊一個項目來選擇它，當你點擊新的項目。

爲了讓您的模板來繪製所選的項目，你需要在流星做的就是描述當一個項目被選中：當某些會話值的ID匹配的項目被選中。就這樣。

我沒有測試過這些代碼，這顯然是不完整的，但希望這點你在重構你的代碼位的正確方向。

來源

2013-02-27 01:46:50 Rahul

編輯我的帖子有更多的一些信息。 – asiammyself 2013-02-27 14:53:39

更新了我的答案回答您的更新:) – Rahul 2013-02-27 18:41:46

是啊，這還有我遇到的問題。當#newproject被點擊projectpicked沒有被創建。也許我會在今天晚些時候上傳.meteor.com上的例子。 – asiammyself 2013-02-27 20:17:20

流星會議試圖觸發模板渲染

回答

相關問題