如何使用 Backbone 将 <option> 标记为在模板中选中

Question

我有一些代码可以将数据插入到模板中：

<script type="text/template" id="yes-or-no-tpl">
  <select>
    <option value=""></option>
    <option value="y" <%= "y" == value ? "selected" : "" }}>Yes</option>
    <option value="n" <%= "n" == value ? "selected" : "" }}>No</option>
  </select>
</script>

到目前为止，我只发现了有关如何对用户选择选项做出反应的问题。我想在用户看到该字段之前将选项标记为已选中。

此代码有效，但我认为必须有更优雅的解决方案。 Backbone 有内置的东西来做这个吗？

我查看了 backbone-forms，但我没有找到指定预选选项的方法。

Answer 1

您始终可以在呈现模板后使用 jQuery 以编程方式完成此操作。是或否模板在这里没有太多节省，但如果 select 中有 50 个选项，它会减少很多冗长。

var value = 'n'
  , tmpFn = _.template($('#yes-or-no-tpl').html())
  , $el = $('#result');
  
$el.html(tmpFn());
$el.find('option[value="' + value + '"]').attr('selected', 'selected');

// view.$el.html(tmpFn());
// view.$('option[value="' + value + '"]').attr('selected', 'selected');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script type="text/template" id="yes-or-no-tpl">
  <select>
    <option value=""></option>
    <option value="y">Yes</option>
    <option value="n">No</option>
  </select>
</script>
<div id="result"/>

关于内置选项，Backbone不包含任何数据绑定。您可以查看像 Epoxy.js 这样的附加库，但要注意维护不善的工具，在较长的运行.

中可能会更麻烦

如何使用 Backbone 将 <option> 标记为在模板中选中

How to mark <option> as selected in template with Backbone

javascript

backbone.js