Question

我使用来自ajax调用的数据填充select元素

选择元素使用具有ServiceName和ServiceId的服务填充。我有使用customerviewmodel，它是Customerviewmodel的子项.Appointviewmodel有serviceid，我使用这个serviceid来从Sevices获取servicename。如何设置＆lt; select＆gt; html元素到Appointmentviewmodel的serviceid。

AppointmentViewModel = function(data) {
  var self = this;
  ko.mapping.fromJS(data, AppointmentMapping, self);

};

AppointmentMapping = {
  "Appointments": {
    key: function(appointment) {
      return ko.utils.unwrapObservable(appointment.AppointmentId);
    },
    create: function(options) {
      return new AppointmentViewModel(options.data);

    }
  }
};

CustomerViewModel = function(data) {

  var self = this;

  ko.mapping.fromJS(data, AppointmentMapping, self);

  self.Services = ko.mapping.fromJS([]);

  $.ajax({
    url: "/salon/services",
    type: 'GET',
    dataType: 'json',
    async: false,
    success: function(result) {
      ko.mapping.fromJS(result, self.Services);
    }
  });

  ko.bindingHandlers.date = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
      var value = valueAccessor();
      var allBindings = allBindingsAccessor();
      var valueUnwrapped = ko.utils.unwrapObservable(value);

      // Date formats: http://momentjs.com/docs/#/displaying/format/
      var pattern = allBindings.format || 'DD/MM/YYYY';

      var output = "-";
      if (valueUnwrapped !== null && valueUnwrapped !== undefined && valueUnwrapped.length > 0) {
        output = moment(valueUnwrapped).format(pattern);
      }

      if ($(element).is("input") === true) {
        $(element).val(output);
      } else {
        $(element).text(output);
      }
    }
  };

};

<tbody data-bind="foreach: Appointments">
  <tr>

    <td>
      <select data-bind="options:$root.Services,
                                               optionsText:'ServiceName',
                                                optionsValue:'ServiceId',value:$root.selected

                                               "></select>
    </td>
    <td>
      <select class="form-control" data-bind="foreach :$root.Products">
        <option data-bind="attr:{value:ProductId,selected:ProductId},text:ProductName"></option>
      </select>
    </td>
    <td>
      <select class="form-control" data-bind="foreach :$root.Employees">
        <option data-bind="attr:{value:EmployeeId,selected:EmployeeId},text:EmployeeName"></option>
      </select>
    </td>
    <td>
      <input id="time" type="date" class="form-control input-sm" data-bind="date:AppointmentDate,format: 'DD MMM YYYY'" />
    </td>
    <td>
      <input id="date" type="date" class="form-control input-sm" data-bind="date:AppointmentTime,format: 'DD MMM YYYY'" />
    </td>
    <td>
      <input id="comment" type="text" class="form-control input-sm" data-bind="value:AppointmentComment" />
    </td>
  </tr>

</tbody>
</table>

Answer 1

您的绑定syntext似乎有点不正确。这是绑定select元素并自动选择值的另一种方法。您需要指定optionsValue，在这种情况下为'value'，并且具有值绑定。

请点击此处了解详情：http://knockoutjs.com/documentation/options-binding.html

您会看到第3个值被选中：

    function viewModel() {
        var self = this;
        self.data = ko.observableArray([
            { text: 'text1',value: 1},
            { text: 'text2',value: 2},
            { text: 'text3',value: 3},
            { text: 'text4',value: 4}
            ]);
        self.value = ko.observable(3);
    }
    ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

    <select data-bind="options: data, optionsText: 'text', optionsValue: 'value', value: value"></select>

KnockOutJs选择绑定更新

1 个答案: