Question

我遇到KnockoutJS和选项绑定问题。

我想要实现的功能是根据选项绑定显示基于所选选项的表单。

奇怪的是，它适用于第一个表单字段，但模型没有为其他表单绑定值。

这是我的标记：

<div id="page">
    <form data-bind="submit: executeTask">
        <select data-bind="options: availableTasks, value: selectedTask, optionsText: 'description',  optionsCaption: 'Select...',"></select>
        <div data-bind="visible: selectedTask">
            <input type="text" data-bind="value:selectedTask().assignee">
            <input type="text" data-bind="value:selectedTask().estimatedTime">
        </div>
        <button class="btn" type="submit">Submit</button>
    </form>
</div>
<script>
    $(function() {
        var taskController = new TaskController(document.getElementById("page"));
    });
</script>

这是我的模特：

(function () {

    function Task(id, description) {
        var model = this;
        model.id = ko.observable(id);
        model.description = ko.observable(description);
        model.assignee = ko.observable();
        model.estimatedTime = ko.observable();
    };

    window.TaskController = function (element) {
        var model = this;

        model.availableTasks = [
        new Task("0", "Laundry"),
        new Task("1", "Dinner")];

        model.selectedTask = ko.observable();

        model.executeTask = function (form) {
            console.log(ko.toJSON(model.selectedTask()));
        };


        ko.applyBindings(this, element);
    };
})();

完整的代码可以在以下小提琴中找到：

http://jsfiddle.net/LkqTU/17057/

正如您在控制台中看到的那样，只有＆＃34;受让人＆＃34;财产被绑定，但不是＆＃34;估计时间＆＃34;属性。

我做错了什么？

谢谢， Bj Blazkowicz

Answer 1

解决方案1：

用if绑定替换可见绑定：

<div data-bind="visible: selectedTask">

应该是

<div data-bind="if: selectedTask">

<强>解释

您收到错误，因为找不到selectedTask().assignee。问题是selectedTask()在页面加载时返回undefined。即使由visible: selectedTask导致输入不可见，也解释了绑定。

使用if绑定时，selectedTask()返回undefined时会忽略标记内的内容。

解决方案2：

正如nemesv所指出的，您可以使用with绑定（请参阅his answer）：

<div data-bind="with: selectedTask">
    <input type="text" data-bind="value: assignee">
    <input type="text" data-bind="value: estimatedTime">
</div>

具有不与模型绑定的表单的Knockout选项

1 个答案:

解决方案1：

解决方案2：