动态生成的元素上的淘汰赛绑定答案

【问题标题】：knockout binding on dynamically generated elements动态生成的元素上的淘汰赛绑定
【发布时间】：2012-10-08 19:20:35
【问题描述】：

我正在使用 Knockout.js，我对此很陌生。我创建了一个Example to my problem. 在这里我试图将淘汰赛绑定绑定到动态生成的元素。但是绑定没有正确应用于动态生成的元素。

我正在尝试将输入文本字段与标签元素同步。因此，无论我们在输入字段中输入什么，相同的文本都会反映在其相应的标签元素中。如果我对我的问题不清楚，请原谅我，请向我询问。帮帮我，伙计们？谢谢。

【问题讨论】：

【解决方案1】：

在您的代码中，您没有使用knockout 的主要功能之一 - 自动生成 html。而不是使用jQuery 添加新行 - 使用剔除foreach 与observableArray 绑定。当您向数组敲除添加新项目时，会自动生成 html 标记。

Javascript：

function CourseViewModel(){
    var self = this;
    self.textValue = ko.observable('');
}

function CeremonyViewModel() {
    var self = this;

    self.cources = ko.observableArray([new CourseViewModel()]);

    self.addCourse = function(){
        self.cources.push(new CourseViewModel());
    };
}

ko.applyBindings(new CeremonyViewModel());

HTML：

 <div id="menutab">
    <form id="createMForm">
        <input type="button" id="createmenu" value="Add menu" data-bind="click: addCourse"/>
        <div class="menu">
            <table data-bind="foreach: cources" class="ui-widget ui-widget-content" >
                <tr>
                    <td>
                        <label for="CourseName">CourseName</label>
                    </td>
                    <td>
                        <input type="text"  data-bind="value: textValue, valueUpdate:'keyup'" class="CreateCourseName" name="CourseName" />
                    </td>
                </tr>
            </table>
        </div>
    </form>
</div>
<div id="courseoptiontab">
    <form id="createCOForm">
        <div class="options">
            <table data-bind="foreach: cources" class="ui-widget ui-widget-content">
                <tr>
                    <td>
                        <label class="colabel">Course Name
                            <span class="forcourse" data-bind="text: textValue"></span>
                        </label>
                    </td>
                </tr>
          </table>
       </div>
    </form>
<div>

这是工作小提琴：http://jsfiddle.net/vyshniakov/g5vxr/

【讨论】：