1

How can i create a dirtyflag in this situation? Been looking for samples but nothing works for me (I've just started learning knockout just a few days ago)

View:

`<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'
       }]



   });

Here is the link the fiddle link

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

4

1 回答 1

2

Knockout 的好处是您不必担心为此目的而持有旗帜。你有一个ObservableArray包含choice一堆choices. subscribe当这些可观察值发生变化时，您可以使用该方法接收事件。

查看可观察对象的KnockoutJS API，并滚动到页面底部，其中讨论了显式订阅可观察对象。

例如，如果您想在您的 ObservableArray 发生choice更改时捕获事件，您可以使用以下代码：

self.choice.subscribe(function(value) { /* Handle the change here. Use the value parameter to get the changes */ });

当添加或删除选项数组时，将调用该订阅方法。

现在，如果您想在单个选择属性更改时接收事件，您需要将这些属性转换为ko.observable对象。一旦你这样做了，你就可以subscribe在每个对象中使用该方法来了解choice列表何时添加新对象。

您可能希望创建一个新对象来定义 a choice，并且在该对象中，您将属性定义为可观察对象。然后，您可以定义订阅方法来处理更改。

 choice = function() {

   this.choiceText = ko.observable(name);
   this.choiceText.subscribe(function(newValue) { /* The value of choiceText has changed to newValue */ });
   this.ZeroToleranceMessage = ko.observable("sdasdasd");
   this.ZeroToleranceMessage.subscribe(function(newValue) { /* Handle the change here */ });

 }

然后，您可以将所有choice对象放入choices = ko.observableArray()数组中。

于 2013-05-23T13:30:57.867 回答