即使一次又一次地刷新页面，如何在车把中永久设置所选选项？

Posted 2023-03-08

【中文标题】即使一次又一次地刷新页面，如何在车把中永久设置所选选项？

【英文标题】：How to set the selected option permanent in handlebar on even refreshing the page again and again?

【发布时间】：2020-12-07 07:22:59

【问题描述】：

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

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

【问题讨论】：

好吧，你的服务器必须告诉车把应该选择哪个选项。因此，您的服务器应将选定的选项值存储在其数据库中，以便让车把知道要选择哪一个。客户端唯一关心的应该是在用户更改所选选项时通过发送值来告诉服务器选择了哪个选项。当服务器接收到这个值时，它应该再次将它存储在数据库中，以便在重新加载页面时，所选选项已经更新并且可以为客户端呈现。

要么您的服务器必须告知，要么您需要将状态保存在本地存储或缓存中。

@EmielZuurbier 我添加了 JS/jQuery 代码。那里如何获取选择的值，然后告诉服务器持久化选择选项代码？

@MackMon 现在如何获取值？

@Biku7 developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

【参考方案1】：

虽然要弄清楚你的应用程序应该做什么需要做很多工作，但我还是会努力向你展示你应该做些什么来让自己朝着正确的方向前进。

首先让我们从您的 Node 服务器开始。在这里，您需要定义客户端可以将其数据发送到的端点，以便您的服务器可以更新您需要存储的值。由于我不知道您的应用程序的扩展，因此我不会详细介绍数据库。

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

您需要使用GET 协议导航到另一个端点，以便您可以呈现Handlebars 模板。我假设您已经准备好了一些东西，但是我在下面添加了一个端点来说明它应该做什么。它应该调用数据库并询问最新选择的源值。当你渲染它时，这个值应该被传递给你的模板。

节点服务器

// 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', (req, res) => 
  // Retrieve selected source from DB and send it to the template.
  res.render('sources',  selectedValue: value );
);

---

您的 Handlebars 模板需要一些逻辑来确定哪些 <option> 元素应该获得 selected 属性。此逻辑基于选项的value 是否等于已存储的值。为此，您需要编写一个帮助函数来帮助您评估此逻辑。

车把助手

Handlebars.registerHelper('isselected', function (selectedValue, value) 
  return selectedValue === value;
);

然后将其放在您的 Handlebars 模板中，并使用您在 res.render() 函数中从服务器传递的 selectedValue 来确定选择哪个选项。

现在您的客户端将使用正确的选项进行渲染。

车把模板

<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 端点来发送或更改数据。

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

JavaScript

$('#sources').on('change', function(event) 
  var $this = $(this);
  var value = $this.val();
  $ajax(
    url: '/update-sources',
    method: 'POST',
    dataType: 'text',
    data: 
      selectedValue: value
    
  ).done(function(response) 
    console.log(response)
  );
);

现在，这一切都是关于它应该如何工作的一个相当粗略的画面。您应该自己弄清楚如何从 POST 端点读取接收到的数据，以及如何保存和读取数据库。

或者，您可以尝试@MackMon 的想法并查看 javascript 存储 API。

祝你好运！

【讨论】：

谢谢！我得到了流量。但这适用于一个选择菜单及其选项。现在问题是我在同一页面上的每个 都有几个相同的选择菜单。我现在想对所有选择菜单做同样的事情。为此，我显然不能为每个选择菜单制作那么多路线。因此，就像您在这里使用 registerhelper 代码来确定要选择哪个选项菜单一样，我也需要先选择选择菜单的代码，然后再选择其各自的选项。我已经在 EDIT 后的描述中添加了代码，您可以查看。 嗯，是的，这就是你问的。确保您的问题尽可能准确。如果您需要跟进您的问题，那么我建议您打开一个新问题并将此答案标记为已接受未来读者。