Question

我想为一组图片创建评分系统。我使用了＃34;使用CSS3设计下一代Web项目＆＃34;中描述的仅使用css的方法。用于检查具有MyId id的无线电输入。因此，当标签显示为星形时，可以隐藏输入（完全或空的，取决于输入的＆＃34;检查＆＃34;属性）。

问题是这个输入一切正常：

<input type="radio" {{bind-attr name="view.customName" value="view.value" id="view.customUuid"}}>
<label class="stars" {{bind-attr for="view.customUuid"}}>{{view.labelText}}</label>

但是如果我在输入中添加一个动作，则会正确调用该动作，但不再检查输入：

<input type="radio" {{action 'updateSelectedRating' view view.value}} {{bind-attr name="view.customName" value="view.value" id="view.customUuid"}}>

我还尝试添加一个已检查的attr，如果应该检查输入，则正确返回true，但没有任何反应：

<input type="radio" {{action 'updateSelectedRating' view view.value}} {{bind-attr name="view.customName" value="view.value" id="view.customUuid" checked="view.isSelected"}}>

我无法理解我是否写了一些非常奇怪的东西（我是Ember的初学者）或者Ember有一些问题之王（我打赌第一个......）。

我使用视图的原因是这是多文件上传页面的一部分，因此每次上传时输入的ID必须不同，我发现的唯一方法是使用视图。

视图的代码是：

`import Ember from 'ember'`

RadioButtonView = Ember.View.extend
  tagName : ''
  attributeBindings : [ "name", "value"]
  templateName: 'views/rating-radio-button'

  customUuid : (->
    return "#{@get('uuid')}-#{@get('value')}"
  ).property('uuid', 'value')

  customName : (->
   return "#{@get('uuid')}-#{@get('name')}"
  ).property('uuid', 'name')

`export default RadioButtonView`

视图的模板：

<input type="radio" {{action 'updateSelectedRating' view view.value}} {{bind-attr name="view.customName" value="view.value" id="view.customUuid" checked="view.isSelected"}}>
<label class="stars" {{bind-attr for="view.customUuid"}}>{{view.labelText}}</label>

这是控制器中的动作：

  actions:
      updateSelectedRating: (value) ->
        @get('model').rating = value

请注意，输入的值已在模型中正确设置，因此仅将输入设置为已检查的问题。

我也尝试在控制器或视图中使用jquery，但它不起作用：

Ember.$(inputId).prop("checked", true)

来自浏览器控制台的相同命令效果很好。

Answer 1

OP解决方案。

感谢@ user1203738指出了我正确的方向。

由于视图的性质（包含单选按钮和标签），我必须嵌套两个视图，其中嵌套的视图是输入的视图：

{{view custom-radio-button name=view.customName selectionBinding="view.isSelected" value=view.value id=view.customUuid}}
<label class="stars" {{bind-attr for="view.customUuid"}}>{{view.labelText}}</label>

这是custom-radio-button：

`import Ember from 'ember'`

CustomRadioButtonView = Ember.View.extend
  tagName : 'input'
  type: "radio"
  attributeBindings : [ "name", "type", "value", "checked:checked:"]

  click : ->
    @set("selection", this.$().val())

  checked : (->
    @get("value") == this.get("selection")
  ).property()

`export default CustomRadioButtonView`

这是第一个被编辑以设置isSelected标志的视图：

`import Ember from 'ember'`

RadioButtonView = Ember.View.extend
  tagName : ''
  attributeBindings : [ "name", "value"]
  templateName: 'views/rating-radio-button'
  isSelected: 0

  updateIsSelected: (->
    @get('controller').set('selectedRating', @isSelected)
  ).observes('isSelected')

  customUuid : (->
    return "#{@get('uuid')}-#{@get('value')}"
  ).property('uuid', 'value')

  customName : (->
    return "#{@get('uuid')}-#{@get('name')}"
  ).property('uuid', 'name')

`export default RadioButtonView`

如果广播输入包含{{action}}，则无法在广播输入上设置“已选中”

1 个答案: