Marionette ItemView 和单选按钮

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')
        }
      }
    }

但是，当我查看界面时 none 单选按钮已被选中。

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

Answer 1

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

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

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

Answer 2

我不同意你的做法，而不是有一个 onBeforeRender 函数，其整个功能是检查 "state" 并将其设置为已检查。我会将 "logic" 移动到模板中，而不在视图中处理它。

您的模板应该类似于：

<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()));

这又是 "my opinion"，您可以按自己认为合适的方式处理它，但我喜欢它，因为那种平凡的逻辑使视图混乱，只会让您身后的人阅读比 [=26 更多的代码=] 也有。而且......我认为这种方法更 "elegant" 因为你正在进行的那个循环可以完全避免。

Marionette ItemView 和单选按钮

Marionette ItemView and radio Buttons

radio-button

backbone.js

marionette