Question

我有一个淘汰组件，它是一个bootstrap表单输入。但是它出现在标签上，for = foo不起作用（点击标签不会突出显示输入）

组件。

   ko.components.register('form-input', {
    viewModel: function(params) {
        this.inputValue = params.value;
        this.label = params.label
        this.placeHolder = params.placeHolder
        this.id = params.id
        this.formControl = ko.pureComputed(function() {
             return !this.inputValue() ? "form-group has-error" : "form-group";
        }, this);
    },
    template:
        '<div data-bind="css: formControl">\
             <label class="control-label col-sm-2" \
             data-bind ="attr: {for: id}"> \
             <span data-bind="text: label"></span>:</label>\
               <div class="col-sm-9">\
               <input type="text"\
                 class="form-control"\
                 data-bind="textInput: inputValue, \
                 attr: {placeholder: placeHolder, id: id}">\
                 </div>\
            </div>'
});

的javascript

function model() {
  var self = this;
  this.firstName = ko.observable('Bryan');
  this.lastName = ko.observable('Dellinger');
  this.phone = ko.observable('800-GET-GIFT');
}

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);
});

HTML

<div class="form-horizontal">
  <form-input
     params="value: firstName,
             label: 'First Name', 
             placeHolder: 'Enter First Name',
             id = 'FirstName' ">
   </form-input>
    <form-input
     params="value: lastName,
             label: 'Last Name', 
             placeHolder: 'Enter Last Name',
             id = 'LastName' ">
   </form-input>
    <form-input
     params="value: phone,
             label: 'Phone', 
             placeHolder: 'Enter Phone Number',
             id = 'phone' ">
   </form-input>
</div>

Answer 1

我认为问题出在你的HTML中。尝试更改参数中的“=”并使用“：”代替：

<div class="form-horizontal">
  <form-input
     params="value: firstName,
             label: 'First Name', 
             placeHolder: 'Enter First Name',
             id: 'FirstName' ">
   </form-input>
    <form-input
     params="value: lastName,
             label: 'Last Name', 
             placeHolder: 'Enter Last Name',
             id: 'LastName' ">
   </form-input>
    <form-input
     params="value: phone,
             label: 'Phone', 
             placeHolder: 'Enter Phone Number',
             id: 'phone' ">
   </form-input>
</div>

标签上的属性不适用于挖空组件

1 个答案: