Question

我从具有状态标志的服务器返回数据。在每个ItemView上我都有一些收音机按钮如下：

<td><input type='radio' name='<%- id %>-typeRecipe' value='0'></td> 
<td><input type='radio' name='<%- id %>-typeRecipe' value='2'></td> 
<td><input type='radio' name='<%- id %>-typeRecipe' value='1'></td>

在创建每个ItemView时，我想检查服务器返回的状态是否与输入值相同，即0,1或2，以及是否将该元素设置为选中。

Recipe = Marionette.ItemView.extend({
   ui: {
     comm: 'input[type=radio]'
},

onBeforeRender: function () {
      for (var i = 0; i < this.ui.comm.length; i++) {
        if(parseInt(this.ui.comm[i].value, 10) === this.model.get('status')) {
          this.ui.comm[i].$el.prop('selected')
        }
      }
    }

但是，当我查看界面时，没有一个单选按钮会检查它们。

当我调试代码时，我可以看到行this.ui.comm[i].$el.prop('selected)正在执行，所以我想知道为什么它不显示将元素设置为选中？ BTW我尝试在onRender事件上使用该功能但结果相同

Answer 1

我不同意你的方法，而不是拥有一个onBeforeRender函数，其功能是检查“状态”并将其设置为选中状态。我会将“逻辑”移到模板中，而不是在视图中处理它。

您的模板看起来像：

<td><input type='radio' name='<%- id %>-typeRecipe' <% if (status == '0') { %>checked='checked'<% } %>value='0'></td> 
<td><input type='radio' name='<%- id %>-typeRecipe' <% if (status == '2') { %>checked='checked'<% } %>value='2'></td> 
<td><input type='radio' name='<%- id %>-typeRecipe' <% if (status == '1') { %>checked='checked'<% } %>value='1'></td>

最后你的渲染器？大声笑。看起来像是：

this.$el.html(this.template(this.model.toJSON()));

这又是“我的意见”，你可以按照自己的意愿处理它，但我喜欢它，因为那种平凡的逻辑使观点混乱，让你身后的人阅读的代码多于他/她。并且...我认为这种方法更“优雅”，因为你可以完全避免你所进行的循环。

Answer 2

这是无线电输入的checked属性，而不是selected。此外，您还需要将第二个参数设置为true，以实际设置该属性的值，否则您只是获取它。

＆＃13;

$('input.selectMe').prop('checked', true);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' name='typeRecipe' value='0'>
<input type='radio' name='typeRecipe' value='2' class="selectMe">
<input type='radio' name='typeRecipe' value='1'>

＆＃13;

木偶项目查看和收音机按钮

2 个答案: