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以编程方式执行此操作。对于是或否模板，此处没有太多保存，但如果您在选择中有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>标记

1 个答案: