1

この状況でダーティフラグを作成するにはどうすればよいですか? サンプルを探していますが、何もうまくいきません (ほんの数日前にノックアウトの学習を始めたばかりです)。

意見:

`<h2>Knockout Table</h2>

<table>
    <thead>
        <tr>
            <th>Choice Text</th>
            <th>Zero Tolerance Message</th>
            <th>Has SubChoice</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: $root.choice.choice">
        <tr>
            <td>
                <label data-bind="text: ChoiceText,visible:IsUsed"></label>
                <input type="text" data-bind="value: ChoiceText, visible: !IsUsed">
            </td>
            <td>
                <label data-bind="text: ZeroToleranceMessage, visible: IsUsed"></label>
                <input type="text" data-bind="value: ZeroToleranceMessage, visible: !IsUsed" />
            </td>
            <td>
                <label data-bind="text: HasSubChoice, visible: IsUsed"></label>
                <select data-bind="foreach: $root.controlType, value: SubChoiceControlType,visible:!IsUsed">
                    <option data-bind="value: ControlTypeId, optionsValue: ControlTypeId, text: ControlType, attr: { title: ControlTypeId }"></option>
                </select>
            </td>
        </tr>
    </tbody>
</table>
<button type='submit' data-bind='click: choiceViewModel.save'>Submit</button>`

JavaScript:

 var ChoiceModel = function (choice) {
       var self = this;
       self.choice = ko.observableArray(choice);
       self.save = function () {
               //return value if not updated rows
          alert('Filter Changed');
       }

   }
   var choiceViewModel = new ChoiceModel([{
       ChoiceId: 92,
       CreatedBy: null,
       CreatedDate: null,
       ModifiedBy: null,
       ModifiedDate: null,
       ChoiceText: 'No',
       QuestionId: null,
       HasSubChoice: false,
       'SubChoiceLabel': null,
       Active: null,
       SubChoiceControlType: 1,
       ZeroTolerance: null,
       ZeroToleranceMessage: null,
       IsUsed: true
   }, {
       ChoiceId: 93,
       CreatedBy: null,
       CreatedDate: null,
       ModifiedBy: null,
       ModifiedDate: null,
       ChoiceText: 'Yes',
       QuestionId: null,
       HasSubChoice: true,
       'SubChoiceLabel': null,
       Active: null,
       SubChoiceControlType: 2,
       ZeroTolerance: null,
       ZeroToleranceMessage: null,
       IsUsed: true
   }, {
       ChoiceId: 628816,
       CreatedBy: null,
       CreatedDate: null,
       ModifiedBy: null,
       ModifiedDate: null,
       ChoiceText: 'Allen',
       QuestionId: null,
       HasSubChoice: false,
       'SubChoiceLabel': null,
       Active: null,
       SubChoiceControlType: 1,
       ZeroTolerance: null,
       ZeroToleranceMessage: 'sdasdasd',
       IsUsed: false
   }, {
       ChoiceId: 628817,
       CreatedBy: null,
       CreatedDate: null,
       ModifiedBy: null,
       ModifiedDate: null,
       ChoiceText: 'asdasda',
       QuestionId: null,
       HasSubChoice: false,
       'SubChoiceLabel': null,
       Active: null,
       SubChoiceControlType: 3,
       ZeroTolerance: null,
       ZeroToleranceMessage: 'sdasdasd',
       IsUsed: false
   }]);
   ko.applyBindings({
       choice: choiceViewModel

       ,
       controlType: [{
           ControlTypeId: 1,
           ControlType: 'Textbox'
       }, {
           ControlTypeId: 2,
           ControlType: 'CheckBox'
       }, {
           ControlTypeId: 3,
           ControlType: 'RadioButton (Yes/No)'
       }, {
           ControlTypeId: 4,
           ControlType: 'DropDownList'
       }]



   });

これがフィドルリンクのリンクです

http://jsfiddle.net/allen213/UHyk6/2/

4

1 に答える 1