KnockoutJS IE問題

Question

有人可以幫助我嗎？

基本上我有一個項目與兒童項目的列表。當一個項目被選中（複選框）時，我有一個bindingHandlers自動檢查匹配項並勾選複選框。

這對Chrome，FF和IE> 9都適用，但不適用於IE 7或8.當複選框被選中時，它仍然未被選中，綁定處理程序自動勾選的選項不會被取消選中。

我的第二個問題是我如何設置isDirty標誌作爲子項（例如：行在我的數據示例中）項目映射到一個窗體。這可能嗎？

對不起，想後的代碼jsfiddle.net，但不能讓它的工作:(

而且，是沒有更好的做什麼，我想實現的方式是什麼？

許多在此先感謝。

UPDATE

我已經成功地把代碼上的jsfiddle http://jsfiddle.net/huzzi786/ugcJU/

所有我想要做的是當一個複選框被選中（只檢查）基於一些條件找到匹配的項目並將它們標記檢查，然後在與IE 7一起使用的窗體上顯示子項目。這將是獎金獲取isDirty標誌處理子項目。

HTML

<table> 
    <tr> 
     <td valign="top"> 
      <table> 
       <thead> 
        <tr> 
         <td></td> 
         <td>Id</td> 
         <td>Name</td> 
        </tr> 
       </thead> 
       <tbody data-bind="foreach: users"> 
        <tr data-bind="attr: { id: ('user-' + id()) }"> 
         <td> 
          <input type="checkbox" data-bind="attr: { value: id(), id: id() }, checked: isSelected, SelectRelatedUsers: Name, event:{'change' : $parent.selectUser }" /></td> 
         <td class="quiet"><span data-bind="text: id"></span></td> 
         <td class="quiet"> 
          <a href="#" class="tag-ts" data-bind="text: Name, click: $parent.selectUser"></a> 
         </td> 

        </tr> 
       </tbody> 
      </table> 
     </td> 
     <td valign="top"> 


      <table data-bind="with: selectedUser, visible: selectedUser() !=null" style="border: 1px solid #ccc"> 

       <thead> 
        <th>Day</th> 
        <th>isDirty</th> 

       </thead> 

       <tbody data-bind="foreach: Lines"> 

        <tr> 
         <td>Mon</td> 
         <td> 
          <input class="input-small" type="text" data-bind="value: Mon" /> 
         </td> 
        <!--  <td data-bind="text: dirtyFlag.isDirty() ? 'Yes' : 'No'"> --> 
        </tr> 
        <tr> 
         <td>Tue</td> 
         <td> 
          <input class="input-small" type="text" data-bind="value: Tue" /> 
         </td> 
         <!-- <td data-bind="text: dirtyFlag.isDirty() ? 'Yes' : 'No'"> --> 
         <tr> 
          <td>Wed</td> 
          <td> 
           <input class="input-small" type="text" data-bind="value: Wed" /> 
          </td> 
          <!-- <td data-bind="text: dirtyFlag.isDirty() ? 'Yes' : 'No'"> --> 
          <tr> 
           <td>Thu</td> 
           <td> 
            <input class="input-small" type="text" data-bind="value: Thu" /> 
           </td> 
          <!--  <td data-bind="text: dirtyFlag.isDirty() ? 'Yes' : 'No'"> --> 
           <tr> 
            <td>Fri</td> 
            <td> 
             <input class="input-small" type="text" data-bind="value: Fri" /> 
            </td> 
            <!-- <td data-bind="text: dirtyFlag.isDirty() ? 'Yes' : 'No'"> --> 
           </tr> 
        <tr> 
         <td colspan="3"> 
          <button type="button" data-bind="click: saveData"> 
           Save 
          </button> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
     </td> 
    </tr> 

</table> 

KnockoutJS

ko.dirtyFlag = function (root, isInitiallyDirty) { 
     var result = function() { } 
     var _initialState = ko.observable(ko.toJSON(root)); 
     var _isInitiallyDirty = ko.observable(isInitiallyDirty); 

     result.isDirty = ko.dependentObservable(function() { 
      return _isInitiallyDirty() || _initialState() !== ko.toJSON(root); 
     }); 

     result.reset = function() { 
      _initialState(ko.toJSON(root)); 
      _isInitiallyDirty(false); 
     }; 

     return result; 
    }; 

    var userMapping = { 
     users: { 
      key: function (item) { 
       return ko.utils.unwrapObservable(item.Id); 
      }, 
      create: function (options) { 
       return createUser(options.data); 
      } 
     } 
    }; 

    var createUser = function (user) { 
     var result = ko.mapping.fromJS(user); 
     result.dirtyFlag = ko.dirtyFlag(result); 
     return result; 
    }; 



     ViewModel = function (serverData) { 
      users = ko.observableArray(); 
      selectedUser = ko.observable(); 
      selectedLines = ko.observable(); 
      users(serverData.users()); 

      ko.bindingHandlers.SelectRelatedUsers = { 
       init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
       }, 
       update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 

        var u = (bindingContext.$parent.users); 
        // console.log(u.length) 
        if ($(element).is(':checked')) { 
         for (var i = 0; i < u().length; i++) { 
          if ((viewModel.group() == u()[i].group()) && (viewModel.status() == u()[i].status()) && (viewModel.accesslevel() == u()[i].accesslevel())) { 
           u()[i].isSelected(true); 

          } else { 
           u()[i].isSelected(false); 

          } 
         }; 
        } 
       } 
      }; 

      selectUser = function() { 
       selectedUser(this); 
       selectedLines(this.Lines); 
       console.log(selectedLines) 
      }; 


      saveData = function() { 
       alert('Saving data...') 
       $.ajax({ 
        type: "POST", 
        url: "/server/save", 
        data: ko.toJSON(selectedLines()), 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function (data) { 
         $('div-result').show(); 
        } 
       }); 

      }; 

      return { 
       users: users, 
       saveData: saveData, 
       selectUser: selectUser 

      } 

     }; 

     var getdata = ko.mapping.fromJSON('{"users":[{"id":1,"Name":"Ali","group":2,"status":false,"accesslevel":1,"isSelected":false,"Lines":[{"lineid":3,"Mon":1,"Tue":8,"Wed":3,"Thu":4,"Fri":5}]},{"id":2,"Name":"Patel","group":2,"status":false,"accesslevel":1,"isSelected":false,"Lines":[{"lineid":2,"Mon":4,"Tue":2,"Wed":4,"Thu":4,"Fri":5}]},{"id":3,"Name":"Peter","group":2,"status":false,"accesslevel":2,"isSelected":false,"Lines":[{"lineid":3,"Mon":1,"Tue":11,"Wed":3,"Thu":1,"Fri":5}]},{"id":4,"Name":"Martin","group":2,"status":false,"accesslevel":2,"isSelected":false,"Lines":[{"lineid":4,"Mon":11,"Tue":2,"Wed":13,"Thu":4,"Fri":5}]},{"id":5,"Name":"Terry","group":2,"status":false,"accesslevel":2,"isSelected":false,"Lines":[{"lineid":5,"Mon":1,"Tue":2,"Wed":3,"Thu":4,"Fri":5}]}]}', userMapping, {}); 

     ko.applyBindings(ViewModel(getdata)); 

Answer 1

看起來它以某種方式，事件是在IE啓動順序有關。

您可以通過從您的selectUser函數返回true來解決此問題，該函數允許執行默認操作。

所以，你想將其更改爲：

 selectUser = function() { 
      selectedUser(this); 
      selectedLines(this.Lines); 
      return true; 
     };