8

私は Knockout.js を使用していますが、これはかなり新しいものです。問題の例を作成しました。ここでは、動的に生成された要素にノックアウト バインディングをバインドしようとしています。しかし、バインディングは動的に生成された要素に適切に適用されません。

入力テキスト フィールドをラベル要素と同期させようとしています。したがって、入力フィールドに何を入力しても、同じテキストが対応するラベル要素に反映されます。私の質問が明確でない場合はご容赦ください。クリアランスを求めてください。みんな助けて？ありがとう。

4

1 に答える 1

6

あなたのコードでは、knockoutHTMLの自動生成の主な機能の1つを使用していません。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/

于 2012-10-18T11:11:44.510 に答える