Question

我试图为博客制作过滤功能。我正在使用node express / MongoDB / Mongoose设置，我想要的是当点击过滤器时，“活动”＆＃39;要添加的类，以及要添加到数组的过滤器（filterArray）。然后我想比较filterArray和来自Mongoose的帖子，并将匹配输出到displayArray，然后我循环并输出到页面。

所以我有两组不同的javascript数据 - 我的Mongoose对象（存储在我的MongoDB数据库中）和我的脚本文件中的数组和函数。我试图弄清楚如何使两者相互配合。

我的问题是：

如果我的数据是从app.js传递的，我如何在app.js中引用DOM？

或

如果我必须使用脚本来操作dom，我该如何在那里引用我的猫鼬数据？

这是我到目前为止所做的：

在我的app.js中：

app.get('/', function(req, res){
    Post.find({}, function(err, posts){
        if (err) {
            console.log("There was an error: " + err);
        } else {
            res.render('index', {posts: posts});
        }
    });
});

在一个单独的脚本文件中（我链接到我的ejs视图中）：

var filterList = ['first item'];
var month = document.getElementsByClassName("post-list__month");

function toggleFilter(element){

    if (element.classList.contains('active')) {
        console.log('active is there so removing it!');
        element.classList.toggle('active');
        filterList = filterList.filter(function(e) { 
            return e !== element.attributes.name.value;
            console.log('Value was removed');
        });
        console.log(filterList);
    } else {
        console.log('active not there so adding it!');
        element.classList.toggle('active');
        filterList.push(element.attributes.name.value);
        console.log(`${element.attributes.name.value} was added to filter list.`);
        console.log(filterList);
    }

}

然后在我的index.ejs视图中（我还没有尝试过滤...）：

<section class="middle-section">

                <% if(posts.length > 0){ %>
                    <% for (var i = posts.length - 1; i > -1; i--) {  %>
                        <a class="post-link" href="/posts/<%= posts[i]._id %>">
                            <div class="post-body">
                                <div class="post">
                                    <div class="post__heading">
                                        <h2 class="heading-secondary"><%= posts[i].title %></h2>
                                    </div>
                                    <div class="post__content">
                                        <p><%= posts[i].body.slice(0, 300) %>...</p>
                                    </div>
                                    <div class="tags">
                                        <span class="heading-secondary-date">
                                            Tags: <%= posts[i].categories[0] %>, <%= posts[i].categories[1] %>
                                        </span>
                                    </div>
                                    <div class="date">
                                        <span class="heading-secondary-date">
                                            <%= posts[i].date %>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <% } %>
                        <% } else { %>
                            <h1>BLOG LIST IS EMPTY<h1>
                                <% } %> 
                            </section>

最后，这是我的Mongoose Post模式 - 我将把类别与filterList中的类别进行比较：

var postSchema = new mongoose.Schema({
    title: String,
    body: String,
    date: String,
    categories: [],
    month: String,
    author: String,
    comments: [
        {
            type: mongoose.Schema.Types.ObjectId,
            ref: "Comment"
        }
    ]
});

提前感谢任何可以提供帮助的人：）

Answer 1

如果我已正确理解您的问题，那么您希望使用过滤器操纵数据。尝试在API中传递查询参数。

app.get('/:filter', function(req, res){
    Post.find({}, function(err, posts){
       if (err) {
          console.log("There was an error: " + err);
       } else {
          var filter = req.params.filter;
          // MAKE DB CALL using the
          res.render('index', {posts: posts});
       }
    });
});

制作过滤器：脚本和节点应用程序之间的交互

1 个答案: