gpt4 book ai didi

meteor - 使用 Meteor react 性地设置选择的 HTML 元素的值

转载 作者:行者123 更新时间:2023-12-04 12:17:09 25 4
gpt4 key购买 nike

我想设置 HTML 的值 <select>元素响应式,无需更改元素的各种选项。我找到了一个解决方案,但它并不优雅。

要进行测试,请使用 create meteor select 创建准系统 Meteor 应用程序并将 select.html 和 select.js 文件的内容更改为以下内容:

选择.html

<body>
{{> select}}
</body>

<template name="select">
<label for="select">{{category}}</label>

<select id="select">
<option value='' disabled selected style='display:none;'>Select...</option>
<option value="Animal">Animal</option>
<option value="Vegetable">Vegetable</option>
<option value="Mineral">Mineral</option>
</select>
</template>

选择.js
if (Meteor.isClient) {
Session.set("category", "")
Session.set("label", "Category")

Template.select.onRendered(function () {
setSelectValue()
})

Template.select.helpers({
category: function () {
setSelectValue()
return Session.get("label")
}
});

function setSelectValue() {
var select = $("#select")[0]
if (select) {
select.value = Session.get("category")
}
}
}

现在启动您的应用程序。在浏览器控制台中,您可以更改 category 的值 session 变量:
Session.set("category", "Animal")

但是,在您更改标签之前,select 元素不会更新:
Session.set("label", "category") // was "Category'

现在选择元素更新,任何后续更改 category session 变量也将更新选择元素。
Session.set("category", "Vegetable") // Now the select element updates

不使用这种笨拙的解决方法,是否可以直接达到相同的效果?

最佳答案

是的。你可以这样做:

  <select id="select">
<option value="Animal" {{animalSelected}}>Animal</option>
<option value="Vegetable" {{vegetableSelected}}>Vegetable</option>
<option value="Mineral" {{mineralSelected}}>Mineral</option>
</select>

和看起来像这样的助手:
  Template.select.helpers({
animalSelected: function () {
return (someCondition === true) ? 'selected' : '';
},
vegetableSelected: function () {
return (someOtherCondition) ? 'selected' : '';
}
});

更好的方法可能是这样的:
  <select id="select">
{{#each options}}
<option value="{{value}}" {{selected}}>{{label}}</option>
{{/each}}
</select>

然后你可以使用 this在助手中决定选择什么,不选择什么。

另一种选择是使用标准 jQuery 来更改选择框。像这样的东西:
$('[name=options]').val( 3 );

this SO answer .

关于meteor - 使用 Meteor react 性地设置选择的 HTML 元素的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32678427/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com