Question

我正在根据ko observable生成datalist个选项。

function Company(company) {
    this.id = company.Id;
    this.name = company.Name;
    this.state = company.State.name;
}


var self = this;
self.companies = ko.observable();
$.get('...', {}, function(result) {

    ko.utils.arrayForEach(result, function(company) {
        self.companies.push(new Company(ko.toJS(company)));
    });
});

HTML：

<input type="text" data-bind="value: selectedCompany" list="companiesList" />
<datalist id="companiesList" data-bind="foreach: companies">
    <option data-bind="value: name, text: state"></option>
</datalist>

好的，这是交易：在Company函数中，我存储该公司的Id。我想做的事？能够将Id值链接到selectedCompany变量而不是名称的东西？我想显示name属性，但我需要存储Id。

有办法做到这一点吗？谢谢大家！

Answer 1

我想显示name属性，但我需要存储Id。

由于HTML5 <datalist>目前没有Knockout绑定，我创建了一个。

我尝试尽可能多地从select绑定中借用，因此支持options，optionsText和optionsValue。您可以通过value指定目标可观察对象。

ko.bindingHandlers.datalist = (function () {
    function getVal(rawItem, prop) {
        var item = ko.unwrap(rawItem);
        return item && prop ? ko.unwrap(item[prop]) : item;
    }

    function findItem(options, prop, ref) {
        return ko.utils.arrayFirst(options, function (item) {
            return ref === getVal(item, prop);
        });
    }
    return {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var setup = valueAccessor(),
                textProperty = ko.unwrap(setup.optionsText),
                valueProperty = ko.unwrap(setup.optionsValue),
                dataItems = ko.unwrap(setup.options),
                myValue = setup.value,
                koValue = allBindingsAccessor().value,
                datalist = document.createElement("DATALIST");

            // create an associated <datalist> element
            datalist.id = element.getAttribute("list");
            document.body.appendChild(datalist);

            // when the value is changed, write to the associated myValue observable
            function onNewValue(newVal) {
                var dataItems = ko.unwrap(setup.options),
                    selectedItem = findItem(dataItems, textProperty, newVal),
                    newValue = selectedItem ? getVal(selectedItem, valueProperty) : void 0;

                if (ko.isWriteableObservable(myValue)) {
                    myValue(newValue);
                }
            }

            // listen for value changes
            // - either via KO's value binding (preferred) or the change event
            if (ko.isSubscribable(koValue)) {
                koValue.subscribe(onNewValue);
            } else {
                ko.utils.registerEventHandler(element, "change", function () {
                    onNewValue(this.value);
                });
            }

            // init the element's value
            // - either via the myValue observable (preferred) or KO's value binding
            if (ko.isObservable(myValue) && myValue()) {
                element.value = getVal(findItem(dataItems, valueProperty, myValue()), textProperty);
            } else if (ko.isObservable(koValue) && koValue()) {
                onNewValue(koValue());
            }
        },
        update: function (element, valueAccessor) {
            var setup = valueAccessor(),
                datalist = element.list,
                dataItems = ko.unwrap(setup.options),
                textProperty = ko.unwrap(setup.optionsText);

            // rebuild list of options when an underlying observable changes
            datalist.innerHTML = "";
            ko.utils.arrayForEach(dataItems, function (item) {
                var option = document.createElement("OPTION");
                option.value = getVal(item, textProperty);
                datalist.appendChild(option);
            });
            ko.utils.triggerEvent(element, "change");
        }
    };
})();

我希望我能做到最好。欢迎更正和改进建议。

您可以这样使用它：

<input list="company" data-bind="datalist: {
    options: companies, 
    optionsValue: 'id', 
    optionsText: 'name', 
    value: selectedCompany
}" />

注释

无需在HTML中创建单独的<datalist>。自定义绑定可以帮助您。
但是，您必须提供list=""元素的<input>属性。到目前为止，我发现在JavaScript中无法动态设置它。
value是可选的，但如果您提供，则必须是可观察的。
您仍然可以使用value之外的原始datalist绑定。它将包含<input>显示的任何文本（没有惊喜）。但是，写入内置值也会更新datalist值，反之亦然。
datalist值具有优先权，并将覆盖视图模型init上的内置值。之后他们保持同步。
options应该是一个对象的数组（普通的或可观察的） - 本例中的公司。）
optionsText和optionsValue是应映射到选项属性的字符串。
您不必使用optionsValue - 在这种情况下，整个对象（单个公司）将存储在value中。我宁愿只存储ID。
目前，设置会对change事件作出反应。这意味着在您离开输入字段之前，您的视图模型不会更新。
在Chrome 32，YMMV上测试。正如我所说，欢迎提出意见和更正。

以下是从原始fiddle复制的演示。

function main() {
  function Company(company) {
      this.id = company.Id;
      this.name = company.Name;
      this.state = company.State.name;
  }

  function ViewModel(sampleData) {
      var self = this;

      self.companies = ko.observableArray();
      ko.utils.arrayForEach(sampleData, function (companyData) {
          self.companies.push(new Company(companyData));
      });

      // KO's "value" binding _can_ supply a start value
      self.val = ko.observable("Microsoft");

      // ... but it is overridden by datalist's "value" binding - in any case you can use both
      self.selectedCompany = ko.observable(1);
  }

  // -----------------------------------------------------------------------------------

  ko.applyBindings(new ViewModel([{
      Id: 1,
      Name: "Apple",
      State: {
          name: "California"
      }
  }, {
      Id: 2,
      Name: "Microsoft",
      State: {
          name: "Washington"
      }
  }, {
      Id: 3,
      Name: "IBM",
      State: {
          name: "New York"
      }
  }]));
}

// -----------------------------------------------------------------------------------
ko.bindingHandlers.datalist = (function () {
    function getVal(rawItem, prop) {
        var item = ko.unwrap(rawItem);
        return item && prop ? ko.unwrap(item[prop]) : item;
    }

    function findItem(options, prop, ref) {
        return ko.utils.arrayFirst(options, function (item) {
            return ref === getVal(item, prop);
        });
    }
    return {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var setup = valueAccessor(),
                textProperty = ko.unwrap(setup.optionsText),
                valueProperty = ko.unwrap(setup.optionsValue),
                dataItems = ko.unwrap(setup.options),
                myValue = setup.value,
                koValue = allBindingsAccessor().value,
                datalist = document.createElement("DATALIST");

            // create an associated <datalist> element
            datalist.id = element.getAttribute("list");
            document.body.appendChild(datalist);

            // when the value is changed, write to the associated myValue observable
            function onNewValue(newVal) {
                var dataItems = ko.unwrap(setup.options),
                    selectedItem = findItem(dataItems, textProperty, newVal),
                    newValue = selectedItem ? getVal(selectedItem, valueProperty) : void 0;

                if (ko.isWriteableObservable(myValue)) {
                    myValue(newValue);
                }
            }

            // listen for value changes
            // - either via KO's value binding (preferred) or the change event
            if (ko.isSubscribable(koValue)) {
                koValue.subscribe(onNewValue);
            } else {
                ko.utils.registerEventHandler(element, "change", function () {
                    onNewValue(this.value);
                });
            }

            // init the element's value
            // - either via the myValue observable (preferred) or KO's value binding
            if (ko.isObservable(myValue) && myValue()) {
                element.value = getVal(findItem(dataItems, valueProperty, myValue()), textProperty);
            } else if (ko.isObservable(koValue) && koValue()) {
                onNewValue(koValue());
            }
        },
        update: function (element, valueAccessor) {
            var setup = valueAccessor(),
                datalist = element.list,
                dataItems = ko.unwrap(setup.options),
                textProperty = ko.unwrap(setup.optionsText);

            // rebuild list of options when an underlying observable changes
            datalist.innerHTML = "";
            ko.utils.arrayForEach(dataItems, function (item) {
                var option = document.createElement("OPTION");
                option.value = getVal(item, textProperty);
                datalist.appendChild(option);
            });
            ko.utils.triggerEvent(element, "change");
        }
    };
})();
main();

.hint {
    color: silver;
    font-size: 80%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<input list="company" type="text" placeholder="Select a company..." data-bind="value: val, datalist: {
    options: companies, 
    optionsValue: 'id',  /* try removing 'optionsValue' and see what happens to the view model */
    optionsText: 'name', 
    value: selectedCompany
}" />
<span class="hint">(note the "change" event occurs after the field loses focus!)</span>

<hr />
<p>View Model:</p>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

Answer 2

你想要像this这样的东西吗？

<强> HTML

 <select data-bind="options: companies, optionsText: 'state', value: selectedCompany, optionsCaption: 'Choose...' "></select>
 <input type="text" data-bind="value: selectedCompany() ? selectedCompany().name : 'unknown'" />

<强> JAVASCRIPT

var Company = function (company) {
    this.id = company.Id;
    this.name = company.Name;
    this.state = company.State.name;
}
var viewModel = {
    selectedCompany: ko.observable(),
    companies: ko.observableArray()
};

for(var x = 0; x<5; x++){
    viewModel.companies.push(new Company({Id: x, Name:'name' + x, State: { name: 'namestate' + x}}));
}
ko.applyBindings(viewModel);

Knockout已经有一些选项来创建这个选择..在文档中看到它 http://knockoutjs.com/documentation/options-binding.html

http://knockoutjs.com/documentation/options-binding.html

KnockoutJS - 将输入值与数据列表值相关联

2 个答案: