如何在一次又一次刷新页面时将设置的选项永久设置在车把中？

问题描述

我想使用车把中的下拉菜单选项。不幸的是，我无法通过jQuery的车把实现它，我不知道为什么。所以我正在使用select-options菜单。下面是代码：

<select name="sources" id="sources" class="custom-select sources" placeholder="Requirement Completed">
      <option value="profile" selected="selected">In Progress</option>
      <option value="word">Done</option>
      <option value="hashtag">Rejected</option>
    </select>

所以我想要的是，当用户选择任何选项时，应该将其永久选择，这意味着即使刷新页面或再次登录后，也不应再次将其重置为默认选项。因为这是要通过下拉菜单来完成的，但是在车把上却无法正常工作。因此，我正在使用选择选项菜单进行尝试。

我该如何实现？

JS代码：

<script>

$(".custom-select").each(function() {
var classes = $(this).attr("class"),id      = $(this).attr("id"),name    = $(this).attr("name");
var template =  '<div class="' + classes + '">';
    template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
    template += '<div class="custom-options">';
    $(this).find("option").each(function() {
      template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
    });
template += '</div></div>';

$(this).wrap('<div class="custom-select-wrapper"></div>');
$(this).hide();
$(this).after(template);
});

$(".custom-option:first-of-type").hover(function() {
$(this).parents(".custom-options").addClass("option-hover");
},function() {
$(this).parents(".custom-options").removeClass("option-hover");
});

$(".custom-select-trigger").on("click",function() {
$('html').one('click',function() {
  $(".custom-select").removeClass("opened");
});
$(this).parents(".custom-select").toggleClass("opened");
event.stopPropagation();
});

$(".custom-option").on("click",function() {
$(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
$(this).parents(".custom-options").find(".custom-option").removeClass("selection");
$(this).addClass("selection");
$(this).parents(".custom-select").removeClass("opened");
$(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
});

$("#sources").val('2');

</script>

编辑：

  <table class="table table-hover">
    <tbody id="append_status">
      <tr>
        <th>Topic (View)</th>
        <th>Status</th>
        <th>Deadline</th>
        <th>Upload</th>
        <th>Completion Date</th>
      </tr>
      {{#each user.Addtasks}}
  <tr>
    <td><a href="profileWriter/view/{{this._id}}">{{this.topic}}</a></td>

    <td>
      <div class="center">
    <select name="sources" id="sources" class="custom-select sources" placeholder="Requirement Completed">
      <option value="0" selected="selected">In Progress</option>
      <option value="1">Done</option>
      <option value="2">Rejected</option>
    </select>
  </div>
  </td>

    <td><span id="deadline"> {{this.deadline}}</span></td>
    <td>

    </td>
    <td></td>
  </tr>
  {{/each}}

  </tbody>
</table>

解决方法

尽管要弄清楚应用程序应做的工作量很大，但无论如何我还是会尽力向您展示如何使应用程序朝正确的方向前进。

首先让我们从您的节点服务器开始。在这里，您将要定义两个端点，客户端可以从该端点向其发送数据，以便服务器可以更新需要存储的值。由于我不知道您的应用程序的扩展范围，因此我不会在数据库中获得太多细节。

创建一个可以从客户端调用的端点。描述其功能以及可以将适当的数据发送到何处的内容。在这种情况下，您要更新一个名为<select>的{{1}}元素，所以我建议sources是一个将数据发送到的不错的URL。确保它侦听/update-source协议并能够读取已发送给它的数据。

您将需要具有POST协议的另一个端点来导航到，以便可以呈现Handlebars模板。我假设您已经准备就绪，但是在下面添加了一个端点来说明它应该做什么。它应该调用数据库并询问最新选择的源值。该值应在呈现时传递给模板。

节点服务器

GET

您的车把模板需要一些逻辑来确定哪个// Route that receives data. app.post('/update-sources',(req,res) => { // Store selected source in DB. res.send('Data received') }); // Route to navigate to,if you don't have that already. app.get('/sources',res) => { // Retrieve selected source from DB and send it to the template. res.render('sources',{ selectedValue: value }); });元素应该具有<option>属性。此逻辑基于选项的selected是否等于已存储的值。为此，您需要编写一个辅助函数，可以帮助您评估此逻辑。

车把帮手

value

然后将其放到Handlebars模板中，并使用您在Handlebars.registerHelper('isselected',function (selectedValue,value) { return selectedValue === value; });函数中从服务器传递来的selectedValue来确定选择哪个选项。

现在，将以正确的选项呈现您的客户端。

车把模板

res.render()

好的，最后一步：客户。您可以从此处使用jQuery将更改后的数据发送到服务器。在这里，我们将使用<select name="sources" id="sources" class="custom-select sources" placeholder="Requirement Completed"> <option value="profile" {{#if (isselected selectedValue "profile") }} selected {{/if}}>In Progress</option> <option value="word" {{#if (isselected selectedValue "word") }} selected {{/if}}>Done</option> <option value="hashtag" {{#if (isselected selectedValue "hashtag") }} selected {{/if}}>Rejected</option> </select>端点向其发送或更改数据。

使用jQuery选择/update-sources元素，并监听<select id="sources">事件。只要选择了新选项，就会触发此事件。发生这种情况时，您将需要获取新值并将其发送到服务器。您的服务器应该从那里接收新值并将其保存在数据库中。

JavaScript

change

现在，所有这些都对它应该如何工作相当粗略地描述。您应该自己弄清楚如何从POST端点读取接收的数据以及如何保存和读取数据库。

或者，您可以尝试@MackMon的想法，并研究JavaScript存储API。

祝你好运！

handlebars.js javascript jquery mongoose