从 Meteor 中的导入文件夹渲染模板 [英] Rendering a template from the imports folder in Meteor
问题描述
据我了解，imports 文件夹的目的是将您导入到 main.js 中的所有代码存储在 client 中> 文件夹.我正在尝试实现 easysearch:autosuggest 并且我在客户端文件夹上的 main.html 中得到了一个使用以下内容的基本示例:
<div id="render-target"></div><div>{{>搜索框}}<模板名称=搜索框"><div class="autosuggest-component">{{>EasySearch.Autosuggest 索引=玩家索引}}
在客户端文件夹中的 main.js 中，我从 '../imports/ui/App.js' 导入 App代码>并渲染它:
Meteor.startup(() => {render(<App/>, document.getElementById('render-target'));});所以我尝试将 main.html 中的模板粘贴到导入文件夹中 App.js 内的 render() 函数中，但是这给了我一个 unexpected token 指向 {{>searchBox}} 的错误.我是 Meteor/node 的新手，我不太确定我做错了什么，也试图从结构的角度了解我是否在做正确的事情.如果我必须构建我的应用程序客户端，imports 文件夹有什么意义?如何使用 App.js 和 render() 使其工作?
这里的问题是您将两个前端库混合在一起.
前端库是一种工具，我们可以使用它来帮助我们构建应用程序的用户界面.人们使用 Meteor 的一些流行工具是 Blaze、React 和 Angular.js
您使用的语法 {{>searchBox}} 是 Blaze 库用来呈现 Blaze 模板的语法.
但是，在您的 Meteor.startup() 块中，您使用的是 React 所需的代码.您还表示您一直在关注 React 教程.不幸的是，您不能将这两者混合使用.
我建议您重新开始并遵循本教程.这是您已经在做的完全相同的教程，但它是 Blaze 版本 - 它将与您一直使用的语法一起使用 - {{>searchBox}}
希望能帮到你
From what I understand, the purpose of the imports folder is to store all your code that you import into main.js in the client folder. I'm trying to implement easysearch:autosuggest and I got a basic example working with the following in my main.html on the client folder:
<body>
<div id="render-target"></div>
<div>
{{>searchBox}}
</div>
</body>
<template name="searchBox">
<div class="autosuggest-component">
{{> EasySearch.Autosuggest index=PlayersIndex}}
</div>
</template>
In my main.js in the client folder I'm importing App from my '../imports/ui/App.js' and rendering it:
Meteor.startup(() => {
render(<App />, document.getElementById('render-target'));
});
So I've tried pasting the template in main.html into the render() function inside App.js in the imports folder, however this gives me an unexpected token error pointing to {{>searchBox}}. I'm new to Meteor/node and I'm not really sure what I'm doing wrong, also trying to understand if I'm doing things correctly from a structural standpoint. If I have to build my app client side, what's the point of the imports folder? How can I get this to work using App.js and render()?
The problem here is that you are mixing two front end libraries together.
A frontend library is a tool we can use to help us build the user interface of our applications. Some popular ones that people use with Meteor are Blaze, React and Angular.js
The syntax you are using {{>searchBox}} is syntax used by the Blaze library to render a Blaze template.
However, in your Meteor.startup() block you are using code needed by React. You've also indicated that you have been following the React tutorial. Unfortunately, you can't mix the two of these.
I suggest you start again and follow this tutorial instead. It's the exact same tutorial you've already been doing but it's the Blaze version - which will work with the syntax you've been using - {{>searchBox}}
I hope that helps
这篇关于从 Meteor 中的导入文件夹渲染模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
